3 Schritte zu einem interaktiven Prototyp

    Die Idee des zweiten Artikels entstand spontan und wurde dank unserer Leser begründet. Nach dem ersten Artikel wurden uns Fragen gestellt und wir sprachen über den Prozess der Erstellung von Websites. Der Begriff "Prototyp" wurde mehrmals gesprochen. In der Tat ist dies eine wichtige Etappe, die man nicht verpassen darf. In diesem Artikel werden wir über unsere Erfahrungen bei der Erstellung interaktiver Prototypen auf der PIXLI-Plattform sprechen.



    Als die Idee zum Erstellen einer Site entstand, wurden ihre Ziele formuliert. In diesem Moment wird die Richtung der Entwicklung klar. Und der Prozess beginnt mit drei Schritten:

    1. Rahmen
    2. Prototyp
    3. Modell

    Ein Drahtgitter ist ein Diagramm. Es besteht aus abstrakten grafischen Elementen, die die grundlegende Position zukünftiger Abschnitte der Site anzeigen. Als Rundfunk ist dies noch kein Radio, sondern bereits ein Schritt in Richtung seiner Schaffung.

    Mock-up ist ein statisches Abbild von Websiteseiten. Vor allem wird er zur Demonstration gegenüber dem Kunden benötigt, um ihn zu überzeugen, Ihre Dienstleistungen zu kaufen. Anschließend geht er zur Implementierung an den Layoutdesigner.

    Prototyp aus dem Griechischen πρῶτος - der erste und τύπος - Aufdruck, Druck; Prototyp, Muster. Die Erstellung eines Prototyps ist ein notwendiger Schritt bei der Entwicklung der Site. Mit Prototypen können Sie die Logik der Site-Schnittstelle erstellen.

    Sie sollten nicht alle Animationen und kleinen Interaktionen enthalten, sondern die Benutzerfreundlichkeit Ihrer Website demonstrieren.


    2 Regeln zum Erstellen von Prototypen


    1. Stellen Sie sicher, dass Ihr Prototyp Funktionen enthält, die für Ihr Publikum relevant sind. Bereitstellung von Demonstrationsmöglichkeiten für alle interessierten Parteien. Der Texter ist daran interessiert, wie der Text in den Block passt, der Vermarkter - wie die Position der Blöcke dem ausgewählten Verkaufsmodell entspricht usw.

    2. Konzentrieren Sie sich auf das endgültige Publikum der Website. Es ist eine Sache, den Prototyp Menschen vorzuführen, die an der Ideenfindung für den Standort beteiligt waren und alle Ziele kennen. Sie müssen einen Blick von jemandem werfen, der die Website nutzen wird. Sie müssen die Zielgruppe kennen, deren Erwartungen und Benutzererfahrung verstehen. Idealerweise sollten Usability-Tests an einem Prototyp durchgeführt werden.

    Beantworten Sie die Fragen:

    1. Welche Websites besuchen sie regelmäßig und warum kehren sie zurück?
    2. Welche Features und Funktionen machen diese Websites unterhaltsam?

    Wenn Sie die Antworten erhalten haben, fragen Sie sie:

    1. Was hoffen sie zu lernen?
    2. Welche Aufgaben wollen sie erfüllen?
    3. Welche Features werden erwartet?

    Testen Sie die Site, um jedes Ihrer Ziele zu erreichen. Auf diese Weise können Sie herausfinden, wo Benutzerfreundlichkeit nicht praktisch oder attraktiv ist. Der Benutzer ist bei der Überprüfung der Funktionalität, der Informationsarchitektur und der allgemeinen Verwendbarkeit von unschätzbarem Wert. Nur ein frischer Look kann viele Probleme aufdecken. Manchmal können wir uns gar nicht vorstellen, wie sich Benutzer verhalten, welche Deadlocks und Fehler sie finden.

    Der Prototyp kann diese Probleme frühzeitig berücksichtigen und spart Zeit, Geld und Kopfschmerzen vor der Kodierungs- und Entwurfsphase.

    Was beinhaltet der Prototyp?


    Ein Prototyp ist viel mehr als ein Drahtmodell oder ein Layout. Dies sollte jedoch nicht die Vollversion der Website sein. Ein Prototyp kann ein Design enthalten oder schematisch sein, muss jedoch die grundlegenden interaktiven Funktionen einer zukünftigen Site demonstrieren.

    Im Designprozess müssen echte Inhalte verwendet werden. Es ist nicht erforderlich, alle Textüberschriften und eine kurze Beschreibung zu haben. Der Inhalt sollte ausreichen, um eine Vorstellung davon zu vermitteln, worum es auf der Seite geht.

    Wie erstelle ich einen Prototyp?


    Prototypen können auf beliebige Weise gezeichnet werden - auf Papier oder mit Software. Jemand benutzt Axure usw., jemand zeichnet in Visio, es ist egal.



    Die Hauptsache ist, dass ohne einen Prototyp keine gute UX erstellt werden kann. Vielmehr erscheint er am Ende, indem er das fertige Produkt wiederholt. Und das ist Zeit und Geld. Die Tatsache, dass wir auf jeden Fall versuchen zu retten. In diesem Artikel wird beschrieben, wie Prototypen auf der PIXLI-Plattform erstellt werden. Es ist nicht nur für das Prototyping gedacht und enthält keine speziellen Tools. Sie können jedoch interaktive Prototypen erstellen, auf deren Grundlage die Site anschließend erstellt wird.

    Welche Prototypen bevorzugen Sie?


    Das Zeitalter der statischen Frames geht unaufhaltsam zu Ende. Ein interaktiver Prototyp ist für die Koordination bequemer, wird für vorläufige Usability-Tests verwendet und hat im Allgemeinen viele Vorteile. Die Prototyp-Benutzeroberfläche ist eine Hypothese. Dies ist ein Kandidat für Designlösungen, die später für das Design verwendet werden. Die Hypothese wird empirisch überprüft.

    Im Jahr 2015 hat die Nielsen Norman Group eine Studie zur Verwendung verschiedener Arten von Materialien durchgeführt, um die Benutzerfreundlichkeit zu verbessern und sie zur Genehmigung einzureichen.



    Wie Sie aus dem Diagramm ersehen können, stehen statische Rahmen und interaktive Prototypen zuversichtlich an erster Stelle. 88% und 83% der UX-Entwickler verwenden sie in ihrer Arbeit.

    Die Studie wurde für verschiedene Zielgruppen durchgeführt. Es wurde vorgeschlagen, die effektivsten Werkzeuge auszuwählen.

    1. Führungskräfte. Über 60% bevorzugen interaktive Prototypen. Statische Frames belegen nur den fünften Platz.



    2. Kunden 67% bevorzugen interaktive Prototypen. An zweiter Stelle stehen visuelle Mocapas.



    3. Entwickler und Ingenieure. 62% wählen interaktive Prototypen, um zusammenzuarbeiten und Spezifikationen zu präsentieren. Wieder statische Frames an fünfter Stelle.



    Diese Daten veranschaulichen UX-Designtrends: Interaktive Prototypen sind bei verschiedenen Zielgruppen am beliebtesten. Die meisten Usability-Experten betrachten sie als wirksames Kommunikationsmittel, um Vertreter der Zielgruppe zu überzeugen. In derselben Studie wurde zwischen statischen und interaktiven Prototypen unterschieden, und die Autoren weisen auf eine Tatsache hin: Statische Frames werden als am häufigsten verwendete Frames bezeichnet (71% der Befragten erstellen sie häufig), sie wurden jedoch nicht in den TOP-4 der effektivsten Materialien für ein Publikum ausgewählt . Dies bedeutet, dass sie häufiger "für sich" gemacht werden.

    PIXLI Interaktive Prototypen


    Die Benutzerfreundlichkeit der Plattform beruht auf der Erstellung eines Prototyps als Site - sie erhält automatisch eine Second-Level-Domain. Sie können die Adresse an den Kunden übertragen, und er testet den Prototyp selbstständig mit oder ohne Zertifizierungsstelle.

    Wenn Sie bereits ein Modell erstellt haben, können Sie Gestaltungselemente in den Prototyp einbeziehen. Oder Sie können sich nur auf die Funktionalität konzentrieren.

    Wir zeigen die Schritte zum Erstellen eines Prototyps der Partnerprogrammwebsite von partner.pixli.ru. Zu diesem Zeitpunkt hatten wir bereits eine allgemeine Vorstellung von Struktur und Inhalt.

    Schritt 1. Erstellen Sie ein Drahtmodell


    Der Rahmen besteht aus Blöcken. Hiermit können Sie die Position von Elementen auf der Seite schätzen. Wir nehmen ein leeres Blatt als Grundlage.



    Das Hauptelement der Seite - der Container für die verbleibenden Blöcke - ist der Bereich. Ein Menü (Navigationsleiste) oder Blöcke sind in einen Bereich eingebettet. Beginnen wir mit dem Menü.



    Das Navigationsfeld bietet uns bereits eine Gruppe von Schaltflächen und einen Platz für ein Logo. Fügen Sie die gewünschte Anzahl von Schaltflächen durch Kopieren hinzu und schreiben Sie den Text darin vor. Über das rechte Bedienfeld konfigurieren wir das Erscheinungsbild der Schaltflächen.



    Fügen Sie als Nächstes die Bereiche hinzu und platzieren Sie den Schieberegler, die Spalten, Blöcke und Texte darin. Ein bisschen Tweak tut auch nicht weh. Hier ist das Ergebnis. Alle Arbeiten dauerten 20 Minuten.





    Schritt 2. Anpassungsfähigkeit konfigurieren


    Auf dem mobilen Gerät müssen das Menü, der Text und die CTA-Schaltfläche zum Verbinden im Partnerprogramm, eine Liste der Vorteile und die CTA-Schaltfläche „Frage stellen“ angezeigt werden. Die meisten Blöcke sind Schieberegler, Lautsprecher usw. Sie müssen nicht konfiguriert werden und nehmen selbst die erforderliche Form an. Wir müssen nur entscheiden, welchen Teil der Informationen wir als nicht wesentlich hinterlassen und welchen wir entfernen. So sieht die mobile Version des Prototyps sozusagen „an der Maschine“ aus.



    Der Editor ermöglicht es jedem Bereich, Block oder Element, die Anzeige auf verschiedenen Gerätetypen zu konfigurieren. Stellen Sie zum Beispiel das Popup-Fenster "Geschenk" nur auf dem PC ein.



    Daher konfigurieren wir die vorhandenen Elemente und entfernen die zusätzlichen.

    Schritt 3. Interaktiv


    Der letzte Schritt ist das Hinzufügen von Interaktivität zu allen Elementen, die animiert werden sollen. Bei einer großen Site sind dies aktive Links, die Vorteile hervorheben, Menüs und Schaltflächen hervorheben und Popup-Fenster anzeigen. Die Animation auf dem Prototyp wird redundant sein, daher werden wir sie nicht implementieren. Die Hintergrundbeleuchtung wird durch Ändern der Parameter in verschiedenen Zuständen eingestellt.



    Nur ein Bereich kann im Editor ein Popup-Fenster sein - dies wird in den Einstellungen angegeben.



    Als nächstes müssen Sie nur die Aktion für die Schaltfläche angeben und das Fenster ist fertig.



    Links werden im Texteditor für Hyperlinks und im Fenster Einstellungsfenster für Schaltflächen angegeben.



    Unsere Testseite besteht aus einer Seite. Alle Links führen entweder zu den Seiten der Hauptseite oder zum internen Bereich. Die Plattform ermöglicht es Ihnen jedoch, mit mehreren Seiten zu arbeiten, sodass Sie einen Prototyp der gesamten Ressource erstellen können.



    Unser interaktiver Prototyp wird erstellt und hat einen eigenen Domainnamen. Es kann zur Prüfung und Freigabe an den Kunden übergeben werden.



    Fazit


    Website-Entwicklung ist ein Prozess von mehr als einem Tag und mehr als einem Schritt. Das Prototyping ist ein wichtiger Schritt, um Zeit und finanzielle Kosten zu optimieren. Je schneller es abgeschlossen ist, desto eher werden der Usability-Test und die Abstimmung mit dem Kunden bestanden. Daher spielt die Qualität und Interaktivität des Prototyps eine wichtige Rolle. Es ist nicht erforderlich, Spezialwerkzeuge zu verwenden. Wir nutzen die PIXLI- Plattform hervorragend und beschleunigen so den Entwurfsprozess in Zukunft.

    Jetzt auch beliebt: