Welche Fähigkeiten benötigen Sie für das richtige UI-/Interaktions-/Funktionsdesign in Web-Apps?

https://stackoverflow.com/questions/21869

09-06-2019
|

Frage

Welche Fähigkeiten sind erforderlich, um Webanwendungen von Grund auf zu entwickeln, um benutzerfreundliche und interaktionsreiche Produkte zu erstellen?

Machen Sie zuerst den UI-Prototyp?
Nutzen Sie User Stories?
Eine agile Methodik oder Best Practice, die Sie empfehlen oder aktiv befürworten würden?

Zusamenfassend: Mit welchen Fähigkeiten wechseln Sie von der Anforderungserfassung zu AmazingWebApp™?

Endlich:Gibt es Bücher, die Sie empfehlen würden?

Lösung

Ein gutes Gespür für Design.Für einen Programmierer ist das schwer zu begreifen.Manchmal hat ein Programmierer ein gutes Gespür dafür, was funktioniert, aber nicht, wie er das erstellt, was tatsächlich am besten oder gut funktioniert.Hauptsächlich erfordert es die Fähigkeit, alles mitzunehmen und bereit zu sein, es beliebig zu bewegen, bis es einfach Klick macht und funktioniert.

Ich mache das so, indem ich herausfinde, wie die logischste und gebräuchlichste Vorstellung davon wäre, wie eine Aufgabe online oder offline erledigt werden kann, wenn jemand dies tun soll, und dann herauszufinden, wie man das reproduzieren kann.Denken Sie kurz, knapp, klar, zugänglich und logisch.Wenn Sie es jemandem ohne Anweisungen geben können und dieser alles tun kann, was Sie von ihm erwarten, und noch mehr, funktioniert es.Wenn sie Anweisungen für alltägliche Dinge in Ihrer App benötigen, ist das ein schlechtes Design.

Ich würde auch sagen, schauen Sie sich andere Apps an, die Sie auf einer Ebene ansprechen, die Sie vielleicht gar nicht bemerken, die aber aus irgendeinem Grund funktionieren, und versuchen Sie, das zu reproduzieren.

Andere Tipps

Ich denke, das Beste, was Sie tun können, ist, einfach die Software zu verwenden.

Wenn ich an Apps arbeite, sende ich ihnen am Ende der Woche (manchmal auch früher) eine E-Mail nach Hause, verlasse den „Arbeitsmodus“ und installiere sie wie gewohnt (d. h.nicht von Ihrer IDE ausführen) und verwenden Sie es dann.

Es ist schwer, den „Testmodus“ zu verlassen und tatsächlich zu „vergessen“, dass man die Anwendung kennt.Aber sobald man sich darauf einlässt, kann es sein WIRKLICH nützlich und sehr aufschlussreich (und ja, manchmal herzzerreißend, wenn man merkt, dass „coole kleine Funktion“ eigentlich scheiße ist und neu implementiert werden muss!).

Mein Chef sagt, dass ich in Bezug auf die Benutzerfreundlichkeit „anal“ bin.Ich mag es :)

Eine Art visuelles Prototyping (auch wenn es mit HTML und CSS erstellt wird) ist meiner Meinung nach am besten.Ich bin versucht, mit dem Codieren zu beginnen und mich später um die Benutzeroberfläche zu kümmern, und das führt normalerweise dazu, dass etwas wirklich Schlimmes passiert (zumindest für mich).Ich entwickle dieses ©WUNDERBARE FUNKTIONALITÄT und am Ende überstürzte ich die Benutzeroberfläche, damit ich schnell über die Tools verfügen konnte, mit denen ich an meinen Code gelangen konnte.

Ich habe vergessen, wo ich das gehört habe, aber für den Endbenutzer ist Ihre Schnittstelle Ihre Anwendung.Wenn Sie versuchen, den Benutzer zufrieden zu stellen, sollten Sie mit der Benutzeroberfläche beginnen und die von Ihnen bereitgestellte Funktionalität von ihr bestimmen lassen.

Best Practice hängt von den Talenten der Teammitglieder ab.

Schreiben Sie zunächst immer User Stories (machen Sie es nach Möglichkeit zu einem Teamevent) und laden Sie sie in LighthouseApp.com oder Ihr bevorzugtes Ticketsystem hoch – Sie brauchen nur die ersten 10–20, um loszulegen.

Wenn Sie einen UI-Designer haben, kann ein Prototyp der Seiten hilfreich sein.Wenn der Softwareentwickler jedoch über gute HTML/CSS-Kenntnisse verfügt, bevorzuge ich es, so schnell wie möglich zu einem funktionierenden Prototyp mit sauberer Benutzeroberfläche/HTML/CSS zu gelangen.Diese Ausgabe könnte einem „modernen Webdesigner“ übergeben werden, der das HTML/CSS überarbeiten/dekorieren kann.Der Designer sollte über das Quellcodeverwaltungssystem mit derselben Codebasis wie der Entwickler arbeiten.

Einige „Old-School-Designer“ wären über den Vorschlag, „die Website zu dekorieren“ beleidigt und würden darauf bestehen, einem Programmierer eine Photoshop-Datei zu übergeben.Für eine einfache Marketing-Website mag das in Ordnung sein, aber mir gefällt der Prozess zum Erstellen einer AmazingWebApp™ nicht

Die Jungs hier geben hervorragende Tipps.

Es gibt einen Unterschied zwischen „optisch hübsch“ und „funktional“ (oder Benutzerfreundlichkeit).man kann tatsächlich das eine ohne das andere haben.Dieses Forum ist ein gutes Beispiel, es ist sehr benutzerfreundlich, aber ehrlich gesagt ist es hässlich – tut mir leid, aber ich liebe euch trotzdem :)

Die Realität ist, dass Sie es brauchen Fähigkeit um gute Schnittstellen zu schaffen.Dies erfordert jahrelange Übung.Normalerweise werde ich damit beauftragt, die gesamte Benutzeroberfläche für eine neue App zu entwerfen.Ich sehe selten Programmierer oder Grafikdesigner mit solchen Fähigkeiten (es ist ein enger Markt).An der Uni habe ich festgestellt, dass ich ein natürliches Gespür für HCI, UI-Design und Usability-Analyse habe.Diese Fähigkeiten habe ich durch viel Lektüre und das Sammeln von Erfahrungen weiter ausgebaut Ich mache viel UI-Design. Ich sage also nur: Machen Sie sich auf harte Arbeit gefasst, wenn Sie es ernst meinen, gut im UI-Design zu werden.Sie können alles tun, was Sie sich vorgenommen haben, aber wenn Sie Zeit damit verbringen, UI-Design zu studieren, bedeutet das, dass Sie keine Zeit damit verbringen, Agilität mit Ruby on Rails oder was auch immer die angesagteste Technologie ist, zu lernen.

ein paar allgemeine Tipps:

Wenn Sie Web-Software-Apps erstellen (im Gegensatz zu Websites mit Präsenz für kleine Unternehmen), ist Lo-Fi-Prototyping hervorragend geeignet.Bringen Sie eine Gruppe von Leuten zusammen, einen Stapel Metzgerpapier und farbige Marker, und Sie werden erstaunt sein, wie viele Bildschirme Sie in ein paar Tagen skizzieren können.
Ihre Software sollte selbsterklärend sein.Für Ihre Software sollte kein Benutzerhandbuch erforderlich sein.Für das CMS, das ich entwickelt habe, gibt es kein Benutzerhandbuch. Ich habe ein paar Dutzend Kunden, die es verwenden, und keiner von ihnen hat mich jemals um ein Handbuch gebeten.
Beobachten Sie, was die „großen Jungs“ tun.Wenn eBay sein Suchfeld so hat:'[......] (Suche)', dann machen Sie es auch so (anstelle des Nicht-Standards, aber ok:'Suchen:[......] (Gehen)'.).das nennt man Erschwinglichkeit.Sie nutzen die Vertrautheit der Menschen mit anderen Systemen, um ihnen einen Einblick in die Funktionsweise Ihres eigenen Systems zu geben.

Ich würde dieses Buch empfehlen:

Lassen Sie mich nicht an Benutzerfreundlichkeit denken

Ich habe auch ein paar Blogartikel, die helfen sollten:

Einige der Dinge, die wir tun:

Viele Prototypen, die unterschiedliche Konzepte sowohl auf Papier als auch in Photoshop erforschen und manchmal tatsächliche Implementierungen
Reduzieren Sie die Dinge, seien Sie iterativ.Versuchen Sie nicht, die gesamte App gleich beim ersten Mal fertigzustellen und zu perfektionieren (weil Sie tief in Ihrem Herzen wissen, dass dies nicht passieren wird).
Klarheit statt Klugheit, das ist eines meiner neuesten Dinge, die ich mir bei der Arbeit an der Benutzererfahrung frage: Sicherlich sehen Symbole und knifflige Dinge großartig aus, aber sind sie klar und prägnant?
Konzentrieren Sie sich auf Benutzerziele. Entwickler neigen häufig dazu, sich jeweils auf einen Bildschirm und eine Aufgabe nach der anderen zu konzentrieren.Denken Sie daran, dass jemand, der Ihre Anwendung verwendet, nicht so denkt. Er hat ein Ziel vor Augen, also versuchen Sie, sich so weit wie möglich darauf einzulassen
Nutzen Sie die Software, die Sie erstellen, so oft wie möglich. Es gibt keinen besseren Weg, ihre Fehler, Mängel und Probleme zu erkennen, als sie selbst zu erleben.

@Brian Warshaw – ich glaube, das war aus einem Gespräch, das Aza Raskin geführt hat, Dieses Video denke ich

Das Entwerfen einer völlig innovativen Benutzeroberfläche ist für die meisten Programmierer (ist das nur ich?) ziemlich schwierig.Was ich beim Erstellen/Entwerfen von Benutzeroberflächen für Web-Apps nützlich finde, ist, immer nach einer schönen, benutzerfreundlichen und eleganten Benutzeroberfläche Ausschau zu halten, die Sie beim Surfen im Internet oder bei der Verwendung anderer Desktop-Apps finden.Wenn Sie einfach die effizienteste Benutzeroberfläche (von jemand anderem an einem anderen Ort entworfen) für die jeweilige Aufgabe finden, können Sie bei der Implementierung und Schaffung einer besseren Benutzererfahrung für Ihre App gute Arbeit leisten.Während ich beispielsweise diese Antwort schreibe, gefällt mir die Art und Weise, wie eine Echtzeitvorschau der Antwort angezeigt wird, mit der Option „Vorschau ausblenden“ – ich würde beim Erstellen einer Benutzerforumsoberfläche auf jeden Fall eine ähnliche Art der Interaktion verwenden wollen .

Herauszufinden, was Sie erstellen und was Ihr Produkt darstellt, ist ein wichtiger Schlüssel zum Erstellen einer erfolgreichen Anwendung.Ich habe kürzlich einen Blogeintrag zum Thema Anforderungserfassung geschrieben, der ein wenig darüber spricht.Sie können es hier lesen:So verbessern Sie Ihre Fähigkeiten zur Anforderungserfassung.

Außerdem sind hier einige wichtige Grundsätze, die ich befolge, um sicherzustellen, dass ich das richtige Produkt mit einem angenehmen Erlebnis baue:

Kennen Sie den Unterschied zwischen dem Benutzer und dem Kunden.Die Geschäftsinhaber, die das glänzende Projekt genehmigen, sind in der Regel die Kunden.Ein verheerender Fehler ist jedoch die Tendenz, sie als Benutzer zu verwirren.Der Kunde ist normalerweise die Person, die den Bedarf für Ihr Produkt erkennt, aber der Benutzer ist die Person, die die Lösung tatsächlich nutzt (und sich höchstwahrscheinlich später über eine Anforderung beschweren wird, die Ihr Produkt nicht erfüllt).Gehen Sie zu mehr als einer Person

Denn wir sind alle Menschen und neigen dazu, uns nicht an jedes quälende Detail zu erinnern.Sie erhöhen die Wahrscheinlichkeit, übersehene Anforderungen zu finden, wenn Sie mit mehr Personen sprechen und diese überprüfen.

Vermeiden Sie SonderangeboteSeien Sie vorsichtig, wenn ein Benutzer nach etwas ganz Bestimmtem fragt.Hinterfragen Sie immer die Vorurteile und prüfen Sie, ob Ihr Produkt dadurch wirklich besser wird.

PrototypWarten Sie nicht bis zum Start, um dem Benutzer zu zeigen, was Sie haben.Erstellen Sie regelmäßig Prototypen (Sie können sie sogar als Beta-Versionen bezeichnen) und erhalten Sie während des gesamten Entwicklungsprozesses ständig Feedback.Dabei werden Sie wahrscheinlich auf weitere Anforderungen stoßen.

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow