Prototypen für Web I: Information, UX und Papierprototypen

1. Trailer: Ich bin Erika Heins, ich bin Webdesignerin und Webentwickler. Ich arbeite seit über 10 Jahren auf dem Gebiet in den USA. Dies ist organisierte Webdesign, UX, IA und Paper Prototypen. In dieser ersten Klasse geht es darum, sich zu organisieren und eine Website zu planen. Also, wir werden durch Inhaltsskizzen über, was haben Sie? Was müssen Sie erstellen? Wen können Sie anfangen, diese Inhalte in einige Branding Richtlinien zu erstellen, so dass während des gesamten Prozesses sollte aus einer konsistenten Sicht kommen? Dann in Sitemaps und User Stories und Wireframes. All diese Art von Funktionalität und Erzählung als eine Art und Weise, in der Sie eine Website navigieren. Am Ende dieser Klasse haben Sie klickbare Papierprototypen. Es könnten entweder Stift- und Papierskizzen sein, die Sie als JPEGs verknüpft haben , um einige Benutzertests durchzuführen, oder wir verwenden ein Tool namens Annehmen. Fähigkeit, Websites zu erstellen und Websites zu pflegen, zu verstehen, wie sie funktionieren und wie sie leistungsfähiger oder effektiver werden können, ist nur eine dieser wertvollen Fähigkeiten. 2. Einführung: Hallo und willkommen zum organisierten Webdesign. Das Ziel dieser Klasse ist es, alle Umrisse zur Verfügung zu stellen, die Sie für einen klaren und produktiven Web-Design-Prozess benötigen. Wie Ryan Singer sagt, ist Design ein pathabhängiger Prozess. Daher wollen wir den Prozess in diskrete Schritte unterteilen und das richtige Feedback zur richtigen Zeit sammeln, um an jedem Punkt gute Entscheidungen zu treffen. Responsive Webdesign hat viele unserer Workflows verändert und so werden wir durch einen Prozess mit mehreren Prototypen sprechen. Unser Projekt ist es, eine Website für sich selbst oder jemand anderen zu planen. Sie werden Ihre Navigation herausfinden, die Benutzererfahrung skizzieren und testen, wie Ihre Ideen empfangen werden. Sie können das zugewiesene Projekt abschließen oder die Lektionen auf Ihre eigene Idee folgen. Wir werden über Projektunterlagen, Sitemaps, Branding Richtlinien, Content-Umrisse, Benutzerflüsse, Responsive Wireframes und Usability-Tests sprechen. Sie können diese Dokumente an Designer und Entwickler oder den nächsten zwei Klassen folgen, um die Website selbst zu entwerfen und zu erstellen. Die Tools, die wir verwenden werden, sind: ein Texteditor wie TextEdit, Google Drawings, normaler alter Stift und Papier, und Balsamiq. Also lasst uns anfangen. Richten Sie ein Google Drive-Konto ein, wenn Sie eines benötigen , und erstellen Sie einen Projektordner für diese Website. Laden Sie Balsamiq auch herunter, wenn Sie die App nicht haben, sie haben eine kostenlose Testversion, mit der Sie beginnen können. 3. Projektskizzen: Beginnen wir mit unseren Projektskizzen. Diese Fragen und Pläne werden uns während des gesamten Prozesses auf dem richtigen Weg halten. Es gibt eine Projekt-Gliederungsdatei im Bereich „Ressourcen“, wenn Sie mitverfolgen und Ihre Datei ausfüllen möchten. Sehen Sie sich zuerst Ihre Ziele auf hohem Niveau an, warum muss diese Seite existieren? Gibt es bestimmte Metriken, die Sie verfolgen? Was lässt Sie auf dieser Seite als Erfolg betrachten? Stellen Sie sicher, dass Ihr Team einverstanden ist. Wir machen in einem Patronen-Event, also wollen wir offensichtlich, dass die Leute auftauchen. Viele Leute halten dort an, aber es gibt auch einige sekundäre Ziele. Wir möchten, dass die Teilnehmer sich kennenlernen, wir wollen, dass sie von diesem Event profitieren, auch wenn es vorbei ist und wir könnten Sponsoring wünschen oder brauchen. Also, machen Sie eine Liste von so etwas. Viele Startups beobachten, was Piraten-Metriken wegen der Abkürzung genannt werden. Dies sind Akquisition, das ist, wie viele Menschen Sie auf die Website bekommen, Aktivierung, wie viele tatsächlich etwas tun, sobald sie dort sind, Umsatz, was sie zur Nachhaltigkeit der Website beitragen, Bindung, was ist, was Nummer wieder kommen, und Überweisung, natürlich, der einem Freund erzählt. Notieren Sie sich also alle bestimmten Zahlen, die Sie treffen möchten. Jetzt reden wir über den Prozess. Wie werden wir diese Ziele erreichen? Wie werden wir mit dem responsiven Web umgehen? Ein typischer Prozess des Wasserfallentwurfs geht also von der Idee über Pläne über Mockups bis hin zu Code. Ein benutzerzentrierter Designprozess beinhaltet Benutzer bei jedem Schritt des Weges, mit Feedback so früh wie möglich umzugehen. Dies ist eine wichtige Verschiebung in der Perspektive und wenn Sie Glück haben, dass Skillshare Ihnen das Forum bietet, um Ihre Arbeit mit anderen zu präsentieren und zu testen. Stanfords Design Thinking Prozess beschreibt dies als Empathie. Sie möchten mehr über das Publikum erfahren, für das Sie entwerfen. Der menschenzentrierte Designprozess von IDEO beginnt mit dem Hören. Du gehst raus und hörst Beobachtungen und Geschichten zu. Der Hauptpunkt ist, dass Sie mit Ihren Benutzern sprechen müssen. Sie müssen ihnen zuhören und Sie müssen ihr Leben und ihre tägliche Routine visualisieren um wirklich etwas zu entwerfen, das angemessen und ansprechend für sie ist. Erfassen Sie alle Ihre Beobachtungen in welcher Form am besten zu Ihnen passt und Sie können verschiedene formale Methoden verwenden, um diese Empathie zu erlangen. Es ist außerhalb des Geltungsbereichs dieser Klasse, aber suchen Sie die Agentur früher als Bolt Peters bekannt war, nach einer Menge großartiger Ressourcen. Es kommt darauf an, zu verstehen. Wenn Sie für jemanden anderen als sich selbst entwerfen, stellen Sie sicher, dass Sie ihre Perspektive wirklich verstehen. Du versuchst, die Welt mit ihren Augen zu sehen. Design ist Übersetzung, nicht Kunst. Halten Sie Ihren Geist so offen wie möglich. Wir werden verschiedene Übungen in dieser Klasse durchlaufen und wenn Sie Ihr Fachwissen fallen lassen, finden Sie vielleicht etwas Neues. Wenn Sie also über Ihre Benutzer nachdenken, sollten Sie Ihre Auswirkungen berücksichtigen. Was könnte das Vermächtnis dieses Projekts sein , weil es verschiedene Formate gibt, die eine Website annehmen kann. Broschüren sind der älteste Stil, in dem Sie nur einige Textinformationen präsentieren und arrangieren. Aber Spiele und Communities sind jetzt häufiger oder wichtiger, da wir über die Technologie verfügen, um sie zu unterstützen. Selbst wenn Sie nicht eine ganze Online-Community oder ein Spiel aufbauen, können Sie es dennoch als Designmodell für interaktive und visuelle Inspiration verwenden. Zum Beispiel wurde Facebook als Spiegel von realen Communities konzipiert. Es ist die wichtigste Interaktion ist wie, die Menschen ermutigt, die sympathischsten Dinge zu posten. Jonathan Harris entwarf Cowbird als Storytelling Plattform. Seine Aktionen umfassen Hingabe, Keimen und vieles mehr. Er spricht darüber, wie dies einen Wettbewerb der Verwundbarkeit geschaffen hat, ein völlig anderes Gefühl auf der Website. Wenn wir also nur unsere Website als ein soziales Netzwerk betrachten, können wir einige grundlegende Funktionen auflisten, aber wenn wir eine neue Metapher finden, könnte es wirklich helfen, die Website zu etwas Neues zu entwickeln. Denken Sie auch darüber nach, wann die Leute die Website besuchen, in einem Moment der Langeweile, als Gewohnheit oder bei der Verfolgung eines Ziels und denken Sie daran, wo sie sein könnten und wie Ihre Website könnte dienen oder sich daran anpassen. Ist Ihre Website eine Karte, um etwas Neues zu entdecken oder ist es ein Service, der Ihnen hilft, sich an etwas Wichtiges zu erinnern? Dies sind alle Metaphern und Inspirationen, kommen wir zurück zum Praktischen. Also, gehen Sie zurück zu Ihrem Projekt skizziert Dokument und nochmals, listen Sie alle Ihre Ziele für dieses Projekt. Sie könnten hoch und hoch und auch äußerst praktisch sein. Jetzt listen Sie alle spezifischen Inhalte auf, mit denen Sie arbeiten müssen. Um so spezifisch wie möglich zu sein, wollen wir Brocken nicht vage Blobs, wie Karen Migraine sagt, Texte, Bilder, Videos, Songs, was immer bereit ist, in Ihre Layouts platziert werden. Ich mache eine Website für meinen Freund, Ariel Crass, der Yogalehrer ist. Also, hier ist die Art von Inhalten, die ich auf seiner Website haben könnte , basierend auf dem, was er bereits auf seiner aktuellen Website hat. Aber Sie möchten auch die Dinge auflisten, die Sie erstellen möchten, ein Intro-Video, eine Bio, was auch immer. Manchmal hat der Kunde diese Liste für Sie, aber oft ist sie unvollständig, also möchten Sie auch darüber nachdenken. Versuchen Sie, in diesen diskreten Stücken zu denken, nicht in vollen Seiten. Je spezifischer wir sind, desto besser können unsere Layouts sein. Die dritte Sache, über die Sie nachdenken müssen, sind Phasen für diese Website. Wenn Sie beispielsweise eine Event-Website durchführen, haben Sie Dinge vor der Veranstaltung, z. B. einen Überblick, einen Zeitplan, einen Register-Link, aber Sie haben möglicherweise auch einige andere Inhalte während der Veranstaltung. Möglicherweise haben Sie einen Livestream oder einen Hashtag-Stream, den Sie abspielen möchten, wenn Leute kommen und besuchen. Anschließend können Sie Fotogalerien aller Teilnehmer anzeigen, Sie können Informationen für die Anmeldung im nächsten Jahr anzeigen. Wenn Sie jetzt alle Streaminhalte auflisten, können Sie den Texter damit beginnen, ihn zu schreiben, und Sie können Fotografen damit beginnen, ihn zu fotografieren und echte Inhalte zu haben, wenn Sie bereit sind zu entwerfen. Daher kann Ihre Inhaltsstruktur auch eine Liste von Teilnehmern, Video-Trailern, News-Feeds, Social-Media-Links, einen E-Mail-Newsletter, Kontaktinformationen, das Bios für die beteiligten Personen, Beschreibungen Ihrer vorherigen Veranstaltungen, ein Shop für Merchandise oder Sponsoring-Info. Wenn eines davon auf Sie zutrifft, fügen Sie es Ihrer Inhaltsstruktur hinzu. Dann können Sie gehen und fragen Entwickler, wie komplex jede dieser Funktionen ist, und Sie können es für zukünftige Updates einhängen, wenn es Ihren Start halten wird. Stellen Sie sich also dieses Projekt als Version 1.0 Ihrer Website vor, aber es ist großartig, voran zu gehen und Pläne für Version 1.1 oder 2.0 zu haben. Listen Sie nun Ihre Prioritätsaktionen für diese Website auf. Was muss passieren, damit diese Seite nachhaltig ist? Beginnen Sie mit Ihren geschäftlichen Anforderungen, im Grunde, Ihre persönlichen Bedürfnisse von dieser Website. Wir werden auf die Bedürfnisse der Nutzer in einer Sekunde näher eingehen. Listen Sie also die Benutzer auf, die diese Website besuchen könnten. Bestellen Sie sie in der Reihenfolge ihrer Wichtigkeit oder Häufigkeit und überlegen Sie, wie sie von Ihrer Website hören, warum sie besuchen werden und wie Sie ihnen helfen, sobald sie dort sind. Schließlich skizzieren Sie Ihre Navigation als eine grobe Liste, wie Sie denken, dass der Inhalt für diese Version gruppiert werden könnte. Wieder gehen wir später ins Detail, aber es ist hilfreich, bereits zu sehen, wie Ihre Website Gestalt annehmen könnte. Wenn Sie mit diesem Teil des Prozesses weiter gehen wollen, empfehle ich Content Strategy von Erin Kissane. Es ist ein großartiges kurzes Buch, das Ihnen hilft, einen Content Plan zu erstellen , der langfristig dauern wird. Also, gehen Sie durch und bereinigen Sie Ihre Projektskizzen und überprüfen Sie sie mit potenziellen Besuchern, wenn Sie können. 4. Seitenübersicht: An dieser Stelle mache ich gerne eine Sitemap und bekomme ein Gefühl für den Gesamtumfang des Projekts. Es ist auch wirklich wichtig, durch Ihre Navigation zu denken und wie die Leute sich auf der Website bewegen. Wenn Sie also all Ihre Inhalte auf Karteikarten legen und versuchen, herauszufinden , welche Gruppen sinnvoll waren und welche Beschriftungen Sie für diese Gruppen verwenden könnten, würden Sie anfangen, ein Gefühl für Ihre Siteübersicht zu bekommen. Das macht Spaß mit Post-Its an der Wand, so können Sie sie frei bewegen und zurückstehen und sich das große Bild der Website ansehen oder Sie können es auch auf Ihrem Computer tun. So funktioniert die Kartensortierung auf kleineren Seiten. Es zeigt Ihnen auch, welche Sprache tatsächlich Menschen verwenden, wenn Sie dies mit einer Gruppe von Personen von Testern tun. Sie können es als ein offener Kartenspeicher tun, wo Sie den gesamten Inhalt anordnen und dann herausfinden, welche Etiketten am Ende sinnvoll sind. Oder Sie können alle Ihre Etiketten an die Wand legen und dann Ihre Benutzer bitten , den Inhalt so anzuordnen, dass er zu jedem dieser Etiketten passt. Stellen Sie sicher, dass Ihr mentales Modell mit dem mentalen Modell Ihres Benutzers übereinstimmt. Für größere Websites gehe ich voran und gehe zum Computer und mache eine Sitemap. Ich benutze OmniRaffle für seine Symbolbibliotheken, aber Google Drawings hat auch magnetische Pfeile, so dass es für diesen Zweck genauso gut ist. Sie möchten alle Bildschirme einschließen, die entworfen, erstellt oder besucht werden müssen. Dazu gehören Newsletter, Facebook-Seiten, Dienste von Drittanbietern , Admin-Panels, alles, was Teil der Benutzererfahrung ist und dass jemand entwerfen muss. Sie müssen nicht für jeden einzelnen Abschnitt einen Pfeil einschließen. Ich habe hier einige hinzugefügt, um Ihnen die grundlegende Navigation von der Homepage, sagen wir, die Retreat-Seite und dann unten durch den Zahlungsprozess zu zeigen. Aber wenn Sie jeden einzelnen Link auf Ihrer Website einschließen, beginnt die Sitemap ein wenig überwältigend zu werden. Jeder entwirft diese auf eine andere Art und Weise, aber hier sind einige Stile, die ich hilfreich finde. Sie werden feststellen, dass ich Rechtecke für alle regulären Seiten verwendet habe. Dann zeigt dieser Stapel von Rechtecken an, dass dies eine Vorlage ist, also weiß ich, dass es mehrere Versionen dieser Seite geben wird. Ich kann auch detaillierter und Farbcodierung machen. Also, ich mache gelb für Landing Pages, die wichtigsten Seiten und wo Leute von Google oder von Facebook kommen könnten. Kunden und Gründer konzentrieren sich oft auf die Homepage, aber Landing Pages sind die ersten oder häufigsten Eindrücke von Ihrer Website vieler Benutzer. Also, denken Sie an BuzzFeed oder Upworthy, gehen Sie überhaupt auf ihre Homepages? Nein. Sie landen nur auf diesen Artikelseiten. Also, denken Sie an Ihre Blog-Posts, denken Sie über spezielle Aktionen, die Sie haben werden, und markieren Sie wirklich diese Seiten, damit sie die gleiche Aufmerksamkeit auf die Homepage bekommen. Sie können auch alle Dienste von Drittanbietern in Grau markieren , damit Sie wissen, dass dies eine Seite ist, die Teil Ihres Ökosystems ist, aber Sie müssen diese nicht wirklich entwerfen. Sie können es vielleicht hauten, aber manchmal kann man es nicht. Dann möchte ich im Grünen alle Seiten hervorheben, die Einnahmen generieren. Es erinnert mich daran, dass ich Leute in diesen Trichter bringen muss, wenn diese Seite versucht, jemanden zu unterstützen. Die blaue Hervorhebung ist für Marketingarbeiten gedacht. Für Startups und andere Leute, die versuchen, ihre Website zu planen, ist es oft gleichzeitig Geschäftsplanung. Indem Sie all diese verschiedenen Eigenschaften, wie Ihre Facebook-Seite oder Twitter-Seite, alle Flyer, die Sie erstellen, das Mund-zu-Mund-Abzeichen, das Sie zu erstellen versuchen, es hilft ihnen, sich daran zu erinnern, dass diese zusätzliche Eigenschaften, die sie erstellen und pflegen müssen. Dann können Sie auch alle Seiten rot markieren, die eine Anmeldung erfordern, also Passwortschutz oder einfach nur Ihr grundlegendes Admin-Panel. Ich verwende auch abgerundete Ecken für Dinge, die eine Ebene anstelle einer eigenständigen Seite sein könnten . Also für mich ist das mein Anmelde-Layer. Ich hätte auch diese Callouts, die auf mehreren Seiten erscheinen würden, also um den Newsletter zu abonnieren, Dinge zu teilen. Dann, also haben Sie vielleicht eine wirklich einfache. Es sieht ungefähr so aus, was Ihnen nur den Namen der Seiten, diese grobe Gruppierung von Inhalten gibt, oder Sie haben vielleicht eine super beteiligte. Dies war für ein mehrjähriges Projekt, an dem ich gearbeitet habe, wo ich jede Plattform, die wir benutzten, farblich codierte. Es war eine Open-Source-Aggregation von vier verschiedenen Open-Source-Plattformen. Dies war die langfristige Vision, wie die Plattform funktionieren würde, wenn wir die Systeme zum ersten Mal zusammenarbeiten, aber offensichtlich ist es ein bisschen überwältigend, wenn Sie nur eine kleine Seite für eine kleine Gruppe von Leuten machen . Versuchen Sie, eine Siteübersicht zu erstellen, die den Umfang des Projekts auf eine für Sie nützliche Weise aufzeigt . Es klärt die prioritären Aktionen auf der Website und es werden alle Teammitglieder auf der gleichen Seite. Sie gehen also zu Google Drive und erstellen eine neue Zeichnung, und Sie haben diese leere Leinwand. Sie können durch die verschiedenen Formen gehen, die verschiedenen Pfeile. Das sind die wichtigsten Werkzeuge. Aber natürlich können Sie das aufpolieren, um so schön aussehen, wie Sie wollen. Gehen Sie also durch Ihre Siteübersicht, erstellen Sie ein Rechteck für jeden Bildschirm oder Abschnitt, erstellen Sie Stapel von Rechtecken für Vorlagen und denken Sie daran, es zu färben, damit Sie einen Überblick über die Prioritäten für auf dieser Seite. 5. Markenrichtlinien: Unser nächster Schritt sind Markenrichtlinien. Die Leute wollen sich nicht immer Zeit für diesen Schritt nehmen, aber es ist super wichtig, wenn Sie möchten, dass Ihr Projekt ein konsistentes Gefühl hat. Laden Sie die Datei mit den Markenrichtlinien aus dem Abschnitt der Ressource herunter, wenn Sie weiterverfolgen möchten. Die nächste Klasse in dieser Serie wird sich ausführlich über visuelles Design informieren, aber Sie müssen auch auf der UX-Phase eine Vorstellung von der Persönlichkeit Ihrer Marke haben. Welche Wörter werden Sie als Etiketten verwenden? Werden Sie Ihre Geschichte durch Bilder, Diagramme oder etwas anderes erzählen? Diese Elemente sind alle Teil der Benutzererfahrung, und es gibt jetzt Millionen von Websites auf der Welt. So ist eine einzigartige und konsistente Persönlichkeit von entscheidender Bedeutung für Funktionalität und Wirkung. Zum Beispiel hat das Weiße Haus ein bestimmtes Bild, das zu vermitteln versucht, was sich sehr von dem unterscheidet, was man von Disney oder von Starbucks erwarten könnte. Also, wie artikulieren Sie das? Wie setzen Sie es in Richtlinien um, die jeder verwenden kann? Es gibt ein Weihnachtsmann Markenbuch, das als eine Art Witz herausgebracht wurde , aber das gibt Ihnen tatsächlich eine wirklich gute Vorstellung davon wie diese Dinge dazu neigen, über die Gefühle und die Werte Ihrer bestimmten Marke zu arbeiten. Also schauen Sie sich das für einen lustigen Überblick durch. Ein weiteres großartiges Beispiel für Markenpersönlichkeit ist MailChimp. Sie haben viel Arbeit geleistet, indem sie wirklich kreativ und wirklich konsistent auf vielen verschiedenen Plattformen sind. Und Aarron Walter, der bei Nalgene arbeitet, hat ein großartiges Buch, um Ihnen mehr Einblicke in diesen Prozess zu geben, es heißt Designing for Emotion. Und wir nutzen ein paar seiner Übung, um unsere Skizze zu vervollständigen. Hier ist ein Beispiel für das, was er eine Markenpersona nennt. Wenn Sie erklären, entweder haben sie einen tatsächlichen Charakter, der etwas von der Persönlichkeit hält, aber für unsere Zwecke, werden wir uns wie eine Berühmtheit vorstellen, die unsere Persönlichkeit repräsentiert. Er macht auch Markeneigenschaften im Format X, aber nicht Y, so dass Sie eine Art von einer Reihe haben, in die Ihre Marke fallen wird. Und dann sprechen Sie auch über Ihre Interaktionsmethoden oder Ihre Interaktivitätsmethoden, die Ihre Website verwenden könnte, um seine Persönlichkeit zu vermitteln. Und denken Sie auch daran, dass es sich um Ihre Benutzer handelt. Sie versuchen nicht, sich selbst zu vertreten, es sei denn, dies ist Ihre Portfolio-Website, aber Sie möchten darüber nachdenken , was Ihre Benutzer bezaubern und begeistern wird. Verwenden Sie also ihre Sprache nicht unbedingt Ihre, versuchen Sie es in einem Stil zu tun, der ihnen etwas gibt, das sie stolz sind zu besitzen, und denken Sie an die Bilder, die für sie streitig sind, nicht unbedingt die banalen Details eines Tages heute. Also, wenn wir all dies tun, gibt es uns eine konsistente Richtung in jedem Schritt des Designs. Also wieder daran zu denken, es als eine Berühmtheit ist ein wirklich guter Weg, um zu beginnen. Also ist deine Persönlichkeit super gehobener und formeller, ist sie junger und unschuldiger und voller Energie? Welche Berühmtheit könnten Sie wählen, um die Persönlichkeit Ihrer Website zu repräsentieren? Beginnen Sie also, indem Sie die besten Eigenschaften Ihrer Marke auflisten. Ist es darum, wie technisch versiert du bist, es darum geht, wie freundlich du bist, wie schnell, was auch immer du versuchst zu überstehen? Machen Sie eine kurze Liste all dieser Funktionen. Und dann, wenn Sie sich diese Persönlichkeitsskala ansehen, die ich entworfen habe, plotten Sie, wo Sie auf jede dieser Bereiche fallen wollen. Sind Sie professioneller oder lässiger? Bist du etablierter oder bist du innovativer? Sie keine Angst, sich auf die eine oder andere Seite zu lehnen. Das wird Ihnen später einige wirklich klare Designhinweise geben. Also nehmen Sie sich etwas Zeit und schauen Sie durch jede dieser Skalen und Handlung, wo Sie jetzt sind, und Sie können auch plotten, wo Sie sein wollen, wenn das etwas anderes ist. Sobald Sie sich auf die Berühmtheit Ihres Repräsentanten entschieden haben, stellen Sie sicher, dass Sie erklärt haben, warum. Es geht also um ihre hart arbeitende Haltung, oder es geht um den Sinn für Glamour, oder es geht um die Annäherung oder das Wissen, das sie repräsentieren. Also sind die Gründe, warum eigentlich wichtiger als die Person, die Sie selbst gewählt haben. Der nächste Schritt danach ist herauszufinden welche Art von visueller Sprache Ihre Persönlichkeit zum Ausdruck bringen könnte. Also, welche Art von Farben, wären sie laut, wären sie ruhig, wären sie irgendwie retro, wären sie Neon und futuristisch, welche Art von engen Entscheidungen, wäre es alles Caps, super formell, wäre es lässig und eilte, wäre es Skripte wie mehr Hand geschrieben. Denken Sie also an all diese Art von visuellen Hinweisen, die Ihre Marke haben könnte. Und dann listen Sie endlich Ihre Interaktionsmethoden auf. Einige Beispiele finden Sie im Dokument für die Markenrichtlinien. Wenn Sie also versuchen, freundlich zu sein, stellen Sie vielleicht Fragen oder geben Sie vielleicht Tipps für Ihre Benutzer. Wenn Sie versuchen, anspruchsvoll zu sein, können Sie eine modernere Animationstechniken verwenden und Sie könnten responsive Layouts verwenden und wenn Sie versuchen, Spaß zu machen, können Sie Humor oder Spiele oder Überraschungen in Ihrem Layout verwenden. Denken Sie also durch einige dieser Ideen und machen Sie eine Skizze aller Stücke Ihrer Marke, wie sie sich auf Ihr Website-Design beziehen könnten. 6. Benutzergeschichten: Jetzt ist es an der Zeit, über User Stories nachzudenken. Das größte, was man sich an Web Design erinnern sollte, ist, dass es 4D nicht 2D ist. Du entwerfst Erfahrungen im Laufe der Zeit, nicht flache Kompositionen. Egal, wie Photoshop Sie sich anders fühlen könnte. Benutzererfahrungen sind das Gefühl, dass ein Benutzer bekommt, wenn er einen Prozess durchläuft. Wollen Sie, dass es super einfach und fokussiert und minimal ist, wie die Google-Homepage, oder wollen Sie verrückt, inspirierend und lustig sein ., mit vielen Leuten um. Wie diese Jameson-Website, können wir uns dies als eine Geschichte und Ihre Storytelling Techniken vorstellen, um uns bei der Planung zu helfen. Genau wie Geschichten einen narrativen Bogen mit einer Eröffnungsszene, den verschiedenen Handlungskrisen, einem Höhepunkt und dann einer Auflösung haben, können wir uns vorstellen, dass unsere User Journeys einen Anfang, eine Mitte und ein Ende haben , und vielleicht sogar ein Epilog. Wo wir Geschichten verwenden, sind sie viel zusammenhängender. So, zum Beispiel die Karma Wi-Fi-Site, stellt uns John vor, der ständig unterwegs ist und in Verbindung bleiben muss. Wenn Sie nach unten scrollen, zeigt es ihm, seinen Karma-Hotspot einzurichten, einen anderen Benutzer zu treffen, ihre Geschichte zu erzählen durch den Prozess der Funktionsweise des Dienstes zu gehen und dann die Vorteile der Nutzung. Es ist viel überzeugender, viel zusammenhängender als viele technische Spezifikationen. Aber was ist ein sehr technisches Produkt. Geschichten auch viel emotionaler und berührender als nur Informationen oder eine Broschüre. Wohltätigkeitswasser macht einen großartigen Job, verschiedene Geschichten darüber zu erzählen , wie dein Geschenk hilft, wie sie angefangen haben, warum du ihnen spenden solltest, anstatt einer anderen Wohltätigkeitsorganisation. Sie verwenden viele persönliche Fotografien, viele Nahaufnahmen, viele persönliche Geschichten, um es viel wirkungsvoller und viel lebensechter zu machen. Innerhalb der Hauptgeschichte, wie Sie ihre Homepage nach unten scrollen, gibt es sogar eine Untergeschichte über hier ist ein wahrscheinliches Szenario, wenn Ihr Dorf bekommt ein Wasserprojekt. So könnten Sie als Spender genau visualisieren, wie Ihr Geschenk helfen wird. Geschichten machen auch Ihre Website viel einzigartiger. Also, Sony sagt, wir sind Ingenieure, aber wir sind auch Künstler, und wenn Sie durch diese Seite gehen, sind es verrückte Beispiele für Animation und Kreativität zu zeigen, dass sie nicht nur ein anderer Hardware-Produzent sind, sondern dass sie das wirklich als künstlerische Kreativität in der Art und Weise, wie sie Dinge entwerfen, was sie sehr verschieden von vielleicht jedem anderen Elektronikanbieter macht. Schockierende Schlagzeilen können auch eine andere Geschichte erzählen, um Ihre Aufmerksamkeit zu erregen, diese es geht um Sklaverei auf der ganzen Welt und dass es immer noch existiert in einer Weise, die Sie vielleicht nicht denken, und so dann einige Aufforderungen, Sie zu fragen einige Fragen oder um Sie auf den nächsten Schritt zu lenken, je nachdem, was Ihre Interessen sind. Also, diese werden auch Flows genannt, wenn Sie versuchen, Menschen zu lenken oder was ihnen durch verschiedene Pfade auf Ihrer Website folgen. Also, in der Marketing-Welt Buch, werden sie Trichter genannt, also würden Sie messen, wie viele Leute die Website besuchen und dann wie viel Prozent der Anmeldungen, wie viel Prozent von denen in Ihre Testversion eintreten, wie viel Prozent geben Sie Ihre Kreditkarteninformationen ein und dann, wie viel Prozent von denen ein zahlender Kunde wird. Sie untersuchen jeden Schritt dieses Trichters, um zu sehen, wo die Leute abfallen , und dann können Sie AB-Tests durchführen, um zu versuchen, jeden Schritt des Trichters zu verbessern. Dann, wenn Sie in Experience Design bekommen, können Sie auch ihre Stimmung in diesem Teil davon abbilden und das hilft Ihnen, Ihre Website zu gestalten , um Ihren Kunden auf eine persönlichere Weise zu unterstützen. Also, Sie können darüber nachdenken, bevor sie überhaupt auf Ihre Website kommen, sie tun etwas, sie recherchieren, vielleicht sind sie auf Google, vielleicht sind sie auf Facebook. Was ist ihre Stimmung dort, wenn sie zum ersten Mal auf Ihre Homepage kommen? Dann ändern sie natürlich ihre Stimmung , während sie sich in den Schritten Ihres Prozesses bewegen, und dann, nachdem sie sich für Ihre Veranstaltung angemeldet haben oder Sie eine E-Mail an Sie gesendet haben, haben sie möglicherweise auch einige Folgefragen oder Gefühle, die Sie auch durch verschiedene Techniken ansprechen könnten. Also, Google und andere Analysetools, mappen Sie dies wieder als einen detaillierten Fluss ab, wo Sie all die verschiedenen Quellen sehen können , die wir darüber nachdenken, wie Menschen diesen Prozess begonnen haben, wo sie landen und dann, was als nächstes und wieder passiert wird zu einer Zeitachse. Also, sie sind nicht 2D-Layout, aber das ist wie zeigen Pfad von jemandem durch die Zeit auf Ihrer Website. Also, wie sollen wir diese Reise planen? Manche Leute machen Personas, aber nach meiner Erfahrung werden diese zu Stereotypen, bei denen man anfängt zu Hypothese, was diese Karikatur tun könnte. Sie möchten also sicherstellen, dass Sie von der tatsächlichen Benutzerrecherche, von einem echten Verständnis Ihrer Benutzer beginnen und sie dann als Rollen formulieren. Also, ein großzügiger Philanthrop ist einer Ihrer wertvollsten Benutzer oder kämpfen sophomore ist einer Ihrer häufigsten Benutzer. Denken Sie dann darüber nach, was jedes ihrer Ziele ist. Sie können also ein Hauptziel haben oder mehrere Ziele haben, während sie sich auf Ihrer Website befinden. Sie werden jeden einzeln auszeichnen. Dann denken Sie darüber nach, was sie von Ihnen brauchen, um dieses Ziel zu erreichen. So zum Beispiel, diese großzügige Philanthrop, die die Welt zu einem besseren Ort machen will, sie brauchen nur Vertrauen, dass ihre Gabe wirksam sein wird , wenn sie sich entscheiden, Ihnen zu geben. Während, wenn Sie sagen, eine Foto-Tutorial-Website, die Sophomore, ihr Ziel ist es, ein Fotograf eines Tages zu werden und so brauchen sie eine Grundausbildung über kurze Tutorials. Das heißt, wenn Sie tatsächlich darüber nachdenken, was der tatsächliche Benutzer benötigt, werden Ihre Inhalte viel spezifischer sein. Also, Sie können das wieder skizzieren, ich mag Haftnotizen, weil es Sie für eine Weile von Ihrem Computer bringt. Indem Sie Ihre Rolle als Ausgangspunkt der Reise betrachten, ganz links und dann versuchen, jeden kleinen Schritt auf dem Weg auszuzeichnen , damit sie dieses Ziel erreichen können. Also, das könnte sein, dass sie von einem Freund über Ihre Website hören und so werden sie Sie Google. Dann landen sie auf Ihrer Kursseite und durchsuchen dann Ihre Klassen und wählen dann einen aus und lesen die Beschreibung. Dann melden sie sich an, dann gehen sie und dann besuchen sie die Klasse. Es gibt eine ganze Reihe von Schritten, wenn Sie wirklich ins Detail gehen wollen. Versuchen Sie also, Ihre wichtigsten Benutzer und ihre Hauptziele zu identifizieren und zeichnen Sie alle diese Schritte aus. Also, Sie können einfach einen Bleistift und Papier verwenden. Ich habe diese Notizbücher von Muji, die ich mag, dass vorgezeichnete Quadrate auf ihnen oder wieder Stickies Spaß machen, Sie können sie an die Wand setzen und dann sind sie einfach zu neu anordnen. Also, denken Sie daran, dass es nur Sie Startzustand und das Endziel sind und Sie versuchen, alle Schritte dazwischen zu füllen. Also, für diesen Foto-Neuling, der nach Training sucht, könnte unser Flow so aussehen. Ihr erster Schritt wäre, dass sie googeln Foto-Tutorials und so wollen wir darüber nachdenken, in rot ist unsere Antwort, dass wir sicherstellen wollen , dass wir unsere Website für diese Keywords optimieren. Dann von Google landen sie auf unserer Homepage und so wollen wir darüber nachdenken, oh dieser Neuling würde vielleicht die beliebtesten Klassen sehen wollen. Sie möchten also einfach für jeden dieser Schritte ausfüllen. Nun gehen Sie und füllen Sie die prioritären Inhalte, die unterstützen würden , was Sie als Nächstes tun möchten oder was sie als Nächstes tun möchten. So können Geschichten zielorientiert sein. Wie wir es gerade beschrieben haben. Sie können aber auch explorativ sein. Wenn du also auf Pinterest oder auf einer Website mit vielen Inhalten bist, kannst du vielleicht nur lesen und surfen und sagen, du könntest davon darstellen, wenn du eine Website machst, auf der die Leute surfen. Aber sie fangen auch an, diese funktionalen Anforderungen aufzudecken. Also, Sie würden anfangen zu sehen, dass, oh wir müssen in der Lage sein, die beliebtesten Klassen hervorzuheben, oder wir müssen in der Lage sein, nach Preis oder nach anderen Funktionen, die diese Person wollen, zu sortieren. Deshalb möchten Sie sie im Detail durchlaufen, und wieder offenbaren sie oft Lücken. Sie haben diesen Inhalt Umriss, den Ihr Kunde vielleicht gedacht hat, aber wenn Sie durch die Geschichten in einem linearen Format gehen, werden Sie beginnen, übersehene Seiten und Inhalte zu realisieren, und es gibt immer einen weiteren Schritt auf die Geschichte. Nachdem sie Ihre Website verlassen haben, können sie es einem Freund sagen. Vielleicht kommen sie später wieder. Wie ist ihre Erfahrung als wiederkehrender Besucher? Aber denken Sie immer über diesen letzten Schritt nach. Auch wenn es in der Regel anmelden, gibt es einen großen Aufruf zum Handeln, also danach möchten Sie ihnen danken. Sie könnten ihnen eine Belohnung geben, die ein guter Zeitpunkt sein könnte, um Feedback zu sammeln Was möchten Sie sonst noch auf unserer Website sehen? Wie hat dir diese Klasse gefallen? Sie können auch andere Aktivitäten empfehlen, wenn Sie ihnen helfen möchten, zu navigieren, Ihrer Website und sehen Sie einige Inhalte, die sie möglicherweise überschwemmt haben. Sie können auch vorschlagen, dass sie Ihnen folgen, abonnieren Sie Ihren Newsletter, bleiben Sie in Kontakt, damit sie nicht verpassen was Sie anbieten, und dann auch nur etwas Spaß damit haben. Sie könnten ihnen einen Witz erzählen, sie überraschen, ihnen etwas unterhaltsames geben, nachdem sie einen bestimmten Teil Ihrer Website beendet haben. Gehen Sie also durch und listen Sie alle Ihre User Stories auf. Identifizieren Sie Ihre Hauptbenutzer, wichtigsten und auch die häufigsten. Listet die Hauptziele für jedes auf. Was sie zu erreichen versuchen und dann auch, was Sie brauchen, um sie zu erreichen und dann listet jeden Schritt auf, um dieses Ziel zu erreichen und wie Sie es unterstützen werden. Auch hier können Sie Stickies, Papier oder Computer verwenden. Dann, nachdem Sie all diese Geschichten geschrieben haben, gehen Sie zurück und aggregieren Sie alle Bedürfnisse für jede Seite. Zum Beispiel braucht dieser unerfahrene Fotograf vielleicht eine Sache von der Homepage, aber ein professioneller Fotograf könnte einen ganz anderen ersten Eindruck erwarten. Also, Sie werden müssen, jede Seite wird eine Reihe von Anforderungen für viele verschiedene Benutzer haben und dann müssen Sie sie in der Reihenfolge der Priorität sortieren. Offensichtlich können Sie nicht alle glücklich machen, aber Ihr Layout wird es versuchen. 7. Wireframes/Papierprototypen: Jetzt sind wir bereit, auf Drahtmodellen und Papierprototypen zu wechseln. Sie möchten mit dem Skizzieren beginnen. Es ist gut, locker zu bleiben und Personal den Computer, wenn Sie versuchen, mit Ihren ursprünglichen Ideen zu kommen. Ich liebe dieses Zitat von Jason Santa Maria, dass, Skizzenbücher oder nicht über ein guter Künstler, es über einen guten Denker. Also, mach dir keine Sorgen um deine Zeichenfähigkeiten. Versuchen Sie nicht, sich bewusst zu sein, was Sie auf der Seite setzen, Sie versuchen nur, alle Ihre Ideen in einer Weise zu erfassen, die Sie durch sie sortieren können. Also, Sie können dies durch eine Menge von verrückten iPad Apps jetzt oder einfach nur Ihr Skizzenbuch tun, was Sie am bequemsten macht , dass Sie Ihre Ideen auf einem Niveau der Klarheit, die angemessen ist rendern können. Also, für meine Yoga-Site, mache ich normalerweise Sharpie für mutige Umrisse und dann eine hellere Pfanne um einige Details zu füllen, offensichtlich wird der Text wirklich anders aussehen, wenn wir in Design bekommen. Es geht nicht wirklich darum, es geht darum, dass wir die Unterrichtszeit haben oder nur den Tag auf der Seite haben? Haben wir ein Muster oder sechs Muster? Du versuchst nur herauszufinden, was auf der Seite sein wird und was die Leute zuerst, zweite, dritte usw. sehen werden. Also, hier ist mein Benutzerfluss als Skizzen und wieder, Ich habe begonnen, zu versuchen und zeigen, was die unterstützenden Inhalte für jede Seite. Also denke ich darüber nach, was der erste Eindruck für diese Person ist, was der unterstützende Inhalt ist und was dann der Aufruf zum Handeln für jeden Schritt des Prozesses ist. Auch hier ist Papier meiner Erfahrung nach der beste Weg, um kreative Ideen zu erfassen. Sie sind nicht auf die Software beschränkt, Sie sind nicht mit Ihren Tastenkombinationen und es ist in bestimmten Aspekten begrenzt. Natürlich können Sie nur eine bestimmte Anzahl von Papierzeichnungen in einer bestimmten Zeit machen. Weil Sie nicht kopieren und einfügen können, können Sie sie nicht duplizieren, es sei denn, Sie werden wirklich verrückt mit der Kopiermaschine und mit Ihrer Schere und Klebeband. Also, wenn wir in Wireframes gehen, bedeutet dieses Wort viele verschiedene Dinge für verschiedene Menschen. Ingenieure könnten alle technischen Anforderungen erwarten, sie würden wissen wollen, wann dieser Bildschirm in der Datenbank gespeichert wird? Wenn unsere Fehlermeldung ausgelöst wird? Was sieht eine abgeloggte Version aus? Während Ihr Manager die Umrisse für jedes einzelne Element auf der Seite an der gleichen Position erwarten kann , wie sie als endgültiger Entwurf angezeigt werden. Designer könnten erwarten, dass diese Wireframes die Prioritäten für die Seite beschreiben würden, aber sie erwarten möglicherweise nicht, das Layout so ernst zu nehmen. Sie möchten also bestätigen, was Ihr Team erwartet, bevor Sie Wireframes starten. Für dieses Projekt konzentrieren wir uns auf Wireframes, die den Hauptinhalt und die Funktionalität skizzieren , damit wir unsere wichtigsten User Stories testen können. Hier ist ein Beispiel dafür, was ich für CreativeMornings getan habe. Wo das dem Entwicklungsteam geholfen hat zu erkennen, dass wir in der Lage sein wollten, nach Kontinent zu sortieren, nach Alphabet zu sortieren, nach Regenbogen zu sortieren. Wir wollten einen Anfang ein Kapitel oder Link haben, wir wollten einen Hover-Zustand auf einer Karte haben, wir brauchten eine Karte haben. So können sie damit beginnen, alle ihre technischen Pläne zu machen und uns mitzuteilen , wie lange unsere Ideen dauern werden, um zu bauen. Aber das ist offensichtlich immer noch ein rau genug Format, dass ich als Designer nicht anfangen kann, Farben zu wählen, ich kann nicht anfangen, mich mit den Layouts zu ärgern. Das wird nie schön aussehen. Wenn dein Drahtmodell schön aussieht, verbringst du zu lange in ihnen. Es geht wirklich nur darum, Ideen und Funktionalität zu erfassen. Hier ist eine andere, die ich für diese Buch-App habe ich erwähnt, Riffle. Ursprünglich hatte ich ein Konzept namens Book Drop, wo es um eine Drag-and-Drop-Schnittstelle ging. Ich wollte wirklich eine Funktion, wo, wenn Sie das Buch nicht mögen, können Sie es in eine Feuergrube ziehen und sehen, wie es brennt, kann es nicht so gut gehen. Aber es hat Spaß gemacht, diese Ideen auf Papier zu bringen und die Leute verstehen zu lassen, wovon wir gesprochen haben. Wieder haben wir darüber gesprochen, was passiert, wenn Sie das Buch einem Freund empfehlen, es generiert eine Nachricht, welche Art von Nachricht? Was sagt diese Botschaft aus? Es gibt viele Unterschritte in jeder Startup-Site, besonders viele Unterstücke, die angesprochen werden müssen. Wenn Sie diese anklickbar machen, können Sie dann auch die Interaktivität von ihnen testen. Also, im Idealfall, bevor Sie sie alle verknüpfen, möchten Sie sicherstellen, dass Sie begonnen haben, diese Hierarchie der Bedürfnisse für jede Seite zu sortieren. Aber die Bedürfnisse, die Sie durch Ihre User Stories bestimmen. Hoffentlich haben Sie alle erforderlichen Funktionen und den Hauptinhalt eingeschlossen und Sie haben begonnen, zu sehen, wo Sie Layoutprobleme haben. Wenn Sie denken, dass Sie alle diese Fotos als Panorama aufstellen alle diese Fotos als , aber dann stellt sich heraus, dass keine Ihrer Fotos so formatiert sind, Sie fangen an, einige dieser Dinge zu sehen und beginnen, vielleicht andere Pläne zu machen , wie Sie die Website visualisieren. Wir müssen auch den Kontext in der Responsive Design Ära berücksichtigen. Also, Google machte eine riesige Forschungsstudie namens The Multi-Screen-Welt und spricht darüber wie der Kontext bestimmt, welches Gerät eine Person abholen wird. Also, wir stereotype, dass mobile Benutzer unterwegs waren. Sie waren auf der Straße oder standen in der Schlange, aber wir wissen jetzt, dass die Leute oft ihr Handy abholen, wenn sie auf der Couch sitzen. Sie wollen nicht auf die andere Seite des Raumes gehen, um auf Ihren Laptop zu gelangen , oder Sie wollen nicht wieder auf Ihren Computer und arbeiten. Sie können also wegen der Zeit, die Sie haben, ein Telefon abholen, weil Sie ein bestimmtes Ziel haben, das Sie erreichen möchten, wegen des bestimmten Standorts, an dem Sie keinen Zugriff auf ein oder das andere Gerät haben , oder auch nur Ihren Geisteszustand. Da die Leute ihre Telefone offensichtlich eher als ein persönliches Gerät sehen, ist es in der Regel nur eine Eins-zu-Eins-Beziehung von einigen mit ihrem Telefon. Ein Computer kann von mehreren Personen gemeinsam genutzt werden , oder es kann etwas sein, das sie nur bei der Arbeit haben. Ein Tablet füllt manchmal diese Zwischenrolle wo es eher wie ein Medienzentrum sein kann, vielleicht ist es nur dort, wo sie Filme ansehen oder einfach nur wo sie Musik hören oder einfach nur wo sie Spiele spielen. Denken Sie also über die besonderen Kontexte für jedes dieser Geräte nach, während wir planen, wie unsere Layouts für sie neu fließen. Auch hier können Telefone einen Prozess starten, aber es ist möglicherweise nicht dort, wo Sie ihn beenden. Also, die Studie besagt, dass 65 Prozent der Suchaufgaben auf dem Smartphone gestartet werden , aber dann können Sie zu Ihrem Computer gehen, um den Prozess fortzusetzen. Wenn Sie also eine Reise planen, wenn Sie versuchen, online einzukaufen, versuchen Sie vielleicht einfach zu sehen, ob etwas auf Ihrem Handy vorrätig ist. Aber dann könnten Sie zu einem größeren Bildschirm gehen, wenn Sie Optionen vergleichen oder versuchen, Pläne zu machen, oder beginnen, ein Forschungsdokument zu kompilieren, also denken Sie darüber nach. Oft geht es beim Telefon oder den mobilen Geräten über das Sammeln der Informationen und der Desktop-Layouts darum, sie zu organisieren oder zu teilen. Es gibt nicht nur drei mehr, die wir immer in Mobilgeräte, Tablet und Desktop aufteilen , aber wir müssen erkennen, dass es jetzt viele Hardware-Hersteller gibt. Betrachten Sie es also als mobil-ish, tablet-ish. Diese mittelgroßen Geräte oder Tablet-ish-Geräte, aber wir können nicht mehr für bestimmte Pixelbreiten entwerfen. Also, jetzt möchten Sie kontextabhängige Storys Liste jeder Ihrer Hauptkontexte schreiben, damit Sie beginnen können, indem Sie nur sagen mobile Tablet und Desktop und Sie wollen die wahrscheinlichen Ziele auf jedem auflisten. Also, jemand auf seinem Handy sucht nur nach Ihrer Adresse, jemand auf dem Desktop versucht, sich anzumelden, geben Sie alle seine Kreditkarteninformationen ein. Was auch immer es ist, listen Sie bestimmte Ziele für jeden Kontext und wieder, listet alle Schritte auf, um jedes Ziel zu erreichen. Gehen Sie dann zurück zu Ihren Seitenanforderungen und fügen Sie diese zusätzlichen Anforderungen für jeden Kontext hinzu. Aber denken Sie auch daran, dass Sie Ihre Bedürfnisse reduzieren könnten. Manchmal brauchen Menschen auf einem Mobiltelefon nicht alles, was Sie auf der Website anbieten. So können Sie möglicherweise auch Ihre Website für verschiedene Geräte vereinfachen. Dann sind wir bereit, den Wireframing-Prozess zu starten. Auch hier geht es darum, sich auf den Inhalt zu konzentrieren und nur Dinge auf die Seite zu bekommen, sie sind nicht gesperrt Layouts. Sie helfen Ihnen, einige Layout-Probleme herauszufinden aber Sie werden alle diese Layouts während der visuellen Entwurfsphase überarbeiten. Konzentrieren Sie sich also darauf, Dinge auf die Seite zu bekommen. Smashing Magazin spricht also über logische Haltepunkte im Vergleich zu diesen gerätespezifischen Haltepunkten. Also, man könnte sagen, in Ordnung, auf einem schmalen Bildschirm, wenn ich nur wenig Platz hätte, würde ich die Navigation brauchen und ich würde den Haupttext der Seite brauchen. Aber wenn ich etwas mehr Platz hätte, würde ich ein paar Anzeigen dort reinstellen, denn das wird meinem Geschäft helfen zu überleben. Wenn ich noch mehr Platz hinzufüge, werde ich voran gehen und den Benutzerkommentare zeigen, damit sie anfangen, ein Gefühl für die Gemeinschaft und Aktion zu bekommen , die auf dieser Seite stattfinden. Also, denken Sie über die Inhalte nach außen Breakpoints versus nur nach innen zu entwickeln. Ich betrachte es auch als den Goldilocks-Ansatz. Da ich normalerweise den ganzen Weg von der Planung über das Design bis in die Entwicklung gehe, gibt es nur so viel Zeit zu tun. Goldilocks zerbrach wieder die Dinge in ish Layout. Also, es ist klein, mittel und groß. Sie nennen es Baby, Mama und Papa Bär gegen mein iPhone. Drei Layout, mein iPhone 5 Layout, das Android Layout. Es ist normalerweise nicht Zeit, ein Layout für jedes Gerät zu erstellen. Betrachten Sie es also als drei allgemeine Kontexte. Also, es ist hilfreich, zu beginnen. Ich gehe an dieser Stelle nach Balsamiq. Also, ich kann kopieren und einfügen und wieder, duplizieren und Sie können Dinge verknüpfen und sie interaktive Ebene machen. Ich möchte damit beginnen, vielleicht alle Seiten nebeneinander zu verdrahten. Also, ich kann einfach kopieren und einfügen wirklich einfach und beginnen zu sehen, wie jedes Layout reagiert. Balsamiq ist ein wirklich hilfreiches Werkzeug, weil es Symbol Library hat. So können Sie einfach Drag & Drop Menüs, Sie können Drag-and-Drop Link-Leisten. Sie müssen nicht all diese Dinge in Illustrator anhand des Pixels neu erstellen. Es wurde in ausgewählten oder deaktivierten Zuständen integriert. Auch hier können Sie Ihre Seiten verlinken, damit Sie sie interagieren und interaktiv PDF oder einen Link zu einem Prototyp machen können . Also, das ist wirklich wichtig, denn wenn Sie reaktionsschnelle Websites machen, haben Sie mindestens das Dreifache des Layouts. Sie müssen also so effizient wie möglich sein. Also wieder, konzentrieren Sie sich auf die Funktionalität und die grundlegende Hierarchie hier. Wenn es anfängt, gut auszusehen, brauchst du zu lange auf diese. Achten Sie auch darauf, dass Sie durch die Balsamiq Symbol Library schauen und sich mit all seinen verschiedenen Elementen vertraut machen. In Übereinstimmungen tatsächlichen HTML und Mustern ziemlich gut. Es ist also viel realistischer als Web-Design-Tool als Photoshop. Sie können auch durch ihre Website Mockups suchen, um für viele andere Symbolbibliotheken zu gehen, zum Beispiel, alle diese Facebook-Sharing-Panels iOS-Elemente und Sie können auch Ihre eigenen Symbole machen , indem Sie Bilder in das Programm importieren oder mit anderen Bibliotheken. Wenn Sie also diese Datei mit allen Größen haben, möchten Sie sie schließlich in ein Layout-Profil aufteilen , damit wir sie testen können. Also, wenn Sie sich die unteren Registerkarten auf diesem Bildschirm, Sie können sehen, dass ich meine was sechs Seiten plus ein Menü alle verspottet und dann können Sie sehen Balsamiq zeigt mir die Links, die ich auf all die verschiedenen Seiten gemacht habe. Also, es wird klickbar sein. Die andere hilfreiche Sache ist, dass, entschuldigen Sie, Sie können auch Ihr Vokabular des Webdesigns erhöhen , indem Sie Websites wie Pattern Tap, UxLab, Bibliotheksmuster und mehr betrachten . Schauen Sie sich meine Ressourcenhandbuch für einige Lieblings-Websites an, da wir alle mit dem gleichen Alphabet von HTML-Elementen arbeiten. Aber es gibt eine Million Möglichkeiten, diese Stücke von Texten, diese Schaltflächen in allerlei neuen User Experience Mustern zu kombinieren . Um gute Wireframes zu erstellen, die tatsächlich zum Spielen und Testen nützlich sind, stellen Sie sicher, dass Sie echten Text und nicht Lorem Ipsum verwenden, so dass Sie tatsächliche Inhalte entwerfen und Ihre Benutzer den Punkt bekommen anstatt nur ein anonyme Anordnung von Boxen. Stellen Sie sicher, dass Sie alle Bilder beschriften. Also, wenn Sie ein großes graues Rechteck auf den Bildschirm fallen lassen , wird niemand wissen, was das bedeutet, es sei denn Sie beschriften es Landschaft von Peru, dann werden sie verstehen, wenn Sie den Benutzer testen. Gehen Sie also durch Ihre Wireframes und beginnen Sie mit Ihren mobilen Layouts und konzentrieren Sie sich auf Hierarchie der Bedürfnisse für jede Seite und in diesem Kontext für jeden Ihrer Benutzer. Dann möchte ich zum größten Layout gehen und die Desktop-Version machen. Also, versuchen, den großen Bildschirm voll auszunutzen und dann werde ich in die Tablet-Layouts gehen und sehen, wie wo der Mittelweg ist. Manchmal gehe ich direkt zum Browser und mache etwas Code dafür, aber es ist auch hilfreich, sie in Ihrer Wireframe-Phase zu tun und zu sehen, wie sich Ihre Layouts halten. 8. Benutzertests: Okay, Sie haben Ihre Drahtmodelle ausgearbeitet. Jetzt wollen Sie sie testen. Warum? Weil Sie sich in der Design- und Entwicklungsphase einige Kopfschmerzen ersparen. Im Webdesign müssen wir zugeben, was Malkovich Bias genannt wird, was die Tendenz ist zu denken, dass jeder das Internet auf die gleiche Weise wie wir es tun. Aber wenn Sie beobachten, wie jemand versucht, durch Ihre schönen Layouts zu gehen, ist es eine aufschlussreiche und sehr bescheidene Erfahrung. Sie können den Knopf nicht finden, von dem Sie dachten, dass er so offensichtlich war. Sie fehlen völlig einige große Teile des Inhalts. Es zwingt Sie wirklich, Ihre Layouts auf eine neue Art und Weise zu betrachten. Also, hier ist ein weiteres Beispiel dafür von usertesting.com. Wie sieht das Erlebnis auf Ihrer Website oder App aus? Oh, Leute, ihr habt wieder keinen Zoom. Das ist schrecklich. Wie soll ich die ganzen Nähte sehen? Schande über dich. Wow. Also, Tonnen von Läden. Ich kann nicht wirklich sagen, wer am nächsten ist. Ich würde gerne einen Blick auf diese werfen, nur die eine Quelle. Ich klicke hier, um zu sehen, aber nichts passiert. Also, lassen Sie mich versuchen, sie zu kontaktieren. Richtig, nun, ich bin nicht in Outlook, also ist das ein Problem für mich, weil ich das nicht verwenden kann. Das ist ein bisschen mehr, als ich ausgeben möchte also werde ich versuchen, hier nach Preis einzugrenzen. Versuchen wir es mit 50 und darunter. Spülseife? Wir sehen also, dass es eine Menge Dinge gibt, die wir nicht wirklich beabsichtigten, passieren zu lassen, und Sie können diese Art von Feedback auch auf Ihrem Wireframe bekommen. Sie können beginnen, die Haupthierarchie zu sehen , wenn sie sie erhalten und wie die Navigation funktioniert. Gehen Sie also zurück zu Ihren Skizzen oder Balsamiq und machen Sie Links zwischen allen Seiten. Also, in Balsamiq, Sie werden einfach Drop-down, es gibt ein Dropdown-Menü, um Links auszuwählen und dann werden Sie sie als interaktives PDF exportieren oder Sie können alle Seiten als PNGs exportieren und sie in der InVision App verknüpfen. Also, Sie werden am Ende mit so etwas, wo Sie alle Ihre verschiedenen Seiten haben und Sie gehen, um sie zusammen zu verknüpfen , so dass jemand alle von ihnen sehen, scheint es, als ob sie durch eine skizzenhafte Website klicken. InVision ist dieses Tool, wo Sie einen ganzen Ordner mit PNGs hochladen können und dann jemand diesen Link auf seinem Handy öffnen kann und wenn er auf die verschiedenen Tasten und Links tippt, wird es sie zu den verschiedenen Bildschirmen in Ihrem PDF führen. Also, das sind die beiden Hauptwerkzeuge, die ich für klickbare Skizzen verwende. Wenn Sie alle Ihre Wireframes auf Bleistift und Papier gemacht haben, können Sie auch InVision App verwenden. Also, machen Sie einfach Fotos von all Ihren Papierskizzen und laden Sie sie dann in InVision hoch. Dann zeichnen Sie Hotspots und Sie können sie von dort aus verknüpfen. Oder Sie könnten Seite an Seite mit jemandem sitzen und einige persönliche Tests eines Papierprototyps durchführen , und Sie würden sie einfach auf die Schaltfläche zeigen und dann würden Sie ihnen das nächste Stück Papier zeigen. Also, das ist eine weitere wirklich Lo-Fi, wirklich schnelle Möglichkeit, dass Sie am ersten Tag Feedback zu Ihren Ideen bekommen können. Wenn Sie also diesen eigentlichen Test durchführen, gibt es einige wichtige Richtlinien, die Sie beachten müssen, damit Sie Ihre Ergebnisse nicht verzerren. Lesen Sie Remote Research, das Buch, und schauen Sie sich auch auf ihrer Website für eine Menge Tipps, wie Sie dies tun können. Sie können Menschen über Ihre Website, durch Labore, persönlich, all die verschiedenen Arten von Forschung testen durch Labore, persönlich, , die Sie tun könnten. Die grundlegenden Richtlinien sind jedoch, dass Sie sich auf Einzelpersonen konzentrieren und nicht auf Gruppen konzentrieren möchten . Menschen haben definitiv ein Herdenverhalten und wenn man eine Menge Leute in einem Raum bekommt, werden sie sich gegenseitig anschauen, bevor sie reagieren und man wird keine ehrlichen Meinungen bekommen. Stellen Sie außerdem sicher, dass Sie mit qualifizierten Benutzern sprechen und nicht jeder auf der Welt Ihre Website lieben oder sie überhaupt nutzen wird. Also, Sie möchten sicherstellen, dass Sie mit den Menschen sprechen, die wirklich begeistert von Ihrer Website sind und sie werden Ihnen das beste Feedback geben. Sie müssen auch versuchen, so neutral wie möglich zu sein. Also, Sie wollen nicht sagen: „Ist diese neue Homepage besser als die letzte?“ Weil das den Zeugen anführt. Sie möchten sagen: „Welche dieser beiden Versionen bevorzugen Sie?“ Sie wollen versuchen, so neutral wie möglich zu sein. Ihre Tendenz als Mensch wird sein wollen, zu nicken und sagen „Ja, das ist richtig“, und geben Sie ihnen etwas Ermutigung oder ein Feedback, aber Sie wollen sehr neutral bleiben und interessant sagen oder fragen Sie sie warum. Warum sagst du das? Warum sollte das wohl hier sein? Fragen Sie sie nach dem Grund für das Feedback, das sie Ihnen geben, und versuchen Sie, auf ihre Motivationen zu kommen. Denn wieder, das sind Ideen, die du auf Papier legst. Sie sind keine polierten Layouts und Sie versuchen nur, das Feedback zu diesen grundlegenden Ideen zu bekommen . Also, um sich auf dieses Interview vorzubereiten, nehmen Sie Ihre wichtigsten User Stories und Sie möchten sie als Szenarien formulieren , damit die Person, die Sie testen, visualisieren kann, was Sie ein wenig besser bedeuten. In Ihrer User Story haben Sie möglicherweise einen Benutzer, der bereits eine Kamera gekauft hat und sich nun an den Support wenden muss. Für Ihre Benutzertests haben Sie möglicherweise etwas wie einen Fehler in Ihrem Konto gefunden und müssen sich an den Kundenservice wenden. Also, das lässt sie sich ein wenig klarer vorstellen, den Anfang Ihrer Geschichte. Dann schreiben Sie dies alles in einem klaren Skript, um Sie zu führen, während Sie die Benutzertests durchführen. Also zuerst geben Sie ihnen einen Kontext, also wie oder warum sie zu Ihrer Website gekommen sind. Also, das ist genau so, wie es in der realen Welt sein würde. Ein Freund sendet ihnen möglicherweise einen Link und überprüft ihn aufgrund der Empfehlung ihres Freundes aus, oder er hat einen besonderen Bedarf, der ihn dazu bringt, Ihre Website zu nutzen. Also, wenn Sie ein Veranstaltungskalender sind, würden sie sagen: „In Ordnung, ich versuche zu machen-“, würden Sie ihnen helfen, sich vorzustellen, dass sie versuchen, einen Plan mit zwei Freunden zu machen. Das würde ihnen also die Perspektive geben, die sie brauchen, um Ihre Layouts in einer angemessenen Denkweise zu beurteilen. Dann wollen Sie erste Eindrücke bekommen. Was ist das erste, was Sie sehen, das Ihre Aufmerksamkeit erregt und was denken Sie, diese Website tut? Bei Ihren Skizzen geht es hauptsächlich um die Schlagzeilen, die Sie ausgewählt haben, vielleicht um einige beschriftete Bilder, wenn Sie sie haben, aber es lässt Sie nur wissen, ob diese Dinge funktionieren. Sie möchten diese Bildschirme ohne Hinweise oder Anweisungen präsentieren, also fragen Sie sie, was sie zuerst sehen, was würden Sie als Nächstes tun und was würden Sie erwarten, wenn Sie das tun? So sehen Sie zum Beispiel diesen Beitrag auf Facebook. Woran würdest du dich daran erinnern? Was würden Sie tun und was würden Sie erwarten? Dann zeigen Sie ihnen den nächsten Bildschirm. Bitten Sie sie, ihre Gedanken und Fragen und Gefühle während dieser Erfahrung zu erzählen. Sie können versuchen, Notizen zu machen, während Sie sie durch sie gehen oder Sie können die Sitzung mit Ihrem Telefon oder mit einer anderen Art von Recorderaufnehmen mit einer anderen Art von Recorder oder Sie können einen Freund bitten, mitzukommen und Schreiber für Sie zu spielen. Danach werden Sie diese Aufgaben zu geben und zu beobachten, diese wichtigsten Szenarien, die Sie sicherstellen möchten, sind wirklich nutzbar und wirklich einfach. Also, eins nach dem anderen, werden Sie sie durch und Sie werden einfach sagen: „Stellen Sie sich vor, Sie versuchen, den Support zu kontaktieren“, und Sie werden sehen, wie sie durch Ihren Prototyp klicken und Sie werden beobachten. Was sie ablenkt, wo haben Sie etwas anderes, das auf ihre Aufmerksamkeit eindringt, welche Labels oder Layouts sie verwirren. Beispiel: Wenn Ihr Shop mit der Bezeichnung Letzte Sammlung gekennzeichnet ist oder was erwarten Sie von Ihren Navigationsbeschriftungen. Dann können Sie auch feststellen, wie schnell sie die Ziele erreichen. Also, braucht es 10 Klicks, nur um ein Produkt in den Warenkorb zu legen oder ist das etwas, das Sie auf neun oder acht reduzieren könnten? Jeder dieser Ströme wollen wir versuchen, so einfach wie möglich zu machen. Dann wirst du einpacken. Erhalten Sie ein umfassendes Feedback. Ist diese Seite für Sie nützlich? Was würdest du sonst noch gerne hier? Was würden Sie normalerweise verwenden, um so etwas zu tun? Wie vergleicht sich diese Seite damit und was ist dann das denkwürdigste an dieser Seite? Das gibt ihnen den Gesamteindruck, und wieder, in dieser Skizzenphase, geht es vor allem um Ihre Ideen und um Ihre Inhalte. Sie können Ihre Tests beenden, sobald Sie konsistente Ergebnisse aus dieser Phase haben. Also, Sie sollten beginnen, Muster nach etwa fünf oder 10 Tests zu sehen, hoffentlich nach fünf nach Jacob Nielsen und einigen anderen großen Usability-Forschern. Sobald Sie also einige klare Erkenntnisse haben, können Sie Ihre Prototypen iterieren. Also, bauen Sie etwas, das wirklich schnell ist. Sie können das Layout ändern, wenn niemand weiß, wo Sie klicken möchten. Sie können die Überschrift ändern, wenn alle denken, dass es stumm ist und Sie können weitermachen und mit Ihren nächsten Leuten erneut testen. Also, gehen Sie durch und machen Sie Ihren Testplan. Schreiben Sie heraus, was Ihre Ziele sind, was Sie erkunden möchten. In diesem Fall möchten Sie möglicherweise Ihre Funktionalität testen und Ihre Inhalte testen. Sie möchten Ihre Anforderungen aufschreiben, wer qualifiziert ist. Also, wenn es sich um eine Portfolio-Website handelt, bewerben Sie sich für eine bestimmte Branche? Wird es eine bestimmte Person mit einem bestimmten Maß an Designausbildung sein, die Ihre Arbeit beurteilen wird, oder wird es etwas sein, wo Sie wollen, dass jeder Ihre Website nutzen kann? Dann möchten Sie Ihre Werkzeuge auflisten, wie Sie planen, sie zu erreichen. Also, werden Sie eine anklickbare PDF machen? Werden Sie InVision verwenden und müssen einige PNGs exportieren? Rufen Sie Ihre Benutzer an und führen Sie sie am Telefon durch? Willst du ein Google Hangout und Screenshare machen und es aufzeichnen? Schreiben Sie genau Ihr Tool aus, damit Sie eine Liste zusammenstellen und dann Ihr Skript ausschreiben können. Also, wieder, Sie setzen den Kontext für den Test, Sie sammeln ihre ersten Impressionen, Sie weisen ihnen eine Vielzahl von Aufgaben zu, und dann schließen Sie ein und erhalten ihren aggregierten Eindruck. Dann wollen Sie auch planen, was Sie behalten werden. Also, werden Sie Fotos von jeder Person, die Sie testen, machen, damit Sie später eine schöne Präsentation machen können? Willst du das alles transkribieren? Werden Sie eine Google-Kalkulationstabelle aufschreiben, damit Sie später versuchen können , einige Datenanalysen darauf durchzuführen? Machen Sie also einen Plan für, sobald Sie fünf oder zehn Personen haben, die Sie getestet haben, was ein nützliches Format für Sie sein wird, um zu diesem Feedback zurückzukehren und es auch mit anderen zu teilen. Das Beste ist, wenn jeder in Ihrem Team diese Benutzer-Test-Sitzungen persönlich beobachten kann , aber das ist nicht immer realistisch. Also müssen wir darüber nachdenken, welche Art von Dokumentation später nützlich sein wird. Also, machen Sie das weiter. Testen und iterieren. Sie können hier auf Skillshare mit anderen Leuten testen, Sie können Leute finden, die Ihre Website-Besucher in der realen Welt repräsentieren und weiter iterieren, bis Sie das Gefühl haben, Sie haben diese funktionalen Wireframes, die Ihre Designer und Ihre Entwickler in den nächsten Phasen. Sie haben jetzt alle Dokumente, die Sie benötigen, um ein solides Web-Erlebnis zu entwerfen und zu entwickeln. Ihr Geltungsbereich ist definiert, Ihre Markenrichtlinien werden festgelegt und Ihre wichtigsten Aktionen sind klar und berücksichtigt. Also, wenn Sie weitermachen möchten, wird unser nächster Schritt Gorgeous Web Design sein und Sie können Ihre eigene Website mitverfolgen und gestalten.