Wo finde ich Inspiration für eine gute Benutzeroberfläche? [geschlossen]


18

Ich habe eine mentale Blockade, was das Entwerfen der Hauptbildschirmoberfläche für eine Desktop-Anwendung betrifft, die ich gerade aktualisiere. Als ich dieses Programm zum ersten Mal entwickelte, war die Bildschirmauflösung 640 x 480. Heute gibt es mehrere Bildschirmauflösungen.

Wo finde ich Ideen für ein gutes Hauptbildschirmlayout für eine Desktopanwendung?


1
Was für eine App ist das? PhotoShop / GIMP / imagey, Eclipse / VS / codey, Maya / 3DStudio / Cad: y?
Macke

Persönliche Finanzanwendung, Daten werden in einer proprietären Datenbank gespeichert.
Michael Riley - AKA Gunny

7
User Experience Stack Exchange - Keine Antwort, aber da Sie gerade dabei sind, eine Benutzeroberfläche neu zu gestalten, finden Sie dies interessant.
yannis


1
@Yannis - Danke ... Ich habe mich dort (und wohin es führt) heute total verlaufen.
Michael Riley - AKA Gunny

Antworten:


6

Ich würde Ihnen empfehlen, ein paar verschiedene Bücher zu lesen, die sich seltsamerweise nicht auf das GUI-Design von Desktop-Anwendungen konzentrieren. Unabhängig davon helfen diese Texte Ihnen dabei, darüber nachzudenken, wie Sie die Informationen, die Ihre Benutzer benötigen, in einer Form erhalten, die ihr Gehirn verstehen wird. Wie auch immer, das erste Buch ist The Non-Designer's Design Book von Robin Williams. In diesem Buch lernen Sie die Komposition in weniger grafisch gestalteten Begriffen. In diesem Buch werden Sie darüber nachdenken, wie der menschliche Geist Designelemente wahrnimmt.

Zweitens, sehen Sie sich Don't Make Me Think von Steve Krug an. Es befasst sich mit Navigation und Datendarstellung auf Webseiten, aber viele der Empfehlungen (z. B. Brotkrumen-Navigation) sind in Desktop-Apps oft genauso sinnvoll wie auf Webseiten.

Wie ein anderes Poster angedeutet hat, gibt es keine guten Entwurfsmuster für eine Medienisolation. Einige Dinge lassen sich nicht so gut zwischen analog und digital übersetzen (dh mehrspaltiger Text in einer tatsächlichen Zeitung im Vergleich zu einer App für die Zeitung), weil bestimmte Einschränkungen je nach Medium unterschiedlich sind, aber viele Prinzipien des guten Designs gelten, egal was passiert Medium, von dem du sprichst.



5

Ein Tipp, den ich oft gehört habe, ist, Designs zu betrachten, die Sie als Inspiration mögen. Dies ist keine isolierte Bezeichnung für Desktop-Anwendungen, sondern sollte sich auf Kunst, Architektur, Web, Fotografie, Produkte usw. erstrecken.

Dies wird Ihnen helfen, ein Gefühl dafür zu entwickeln, was gutes Design ist, und wird Ihnen bei langfristigen Designanwendungen helfen, die für das Auge angenehm und benutzerfreundlich sind.

Wenn Sie ein Prototyp für Ihr Design erstellen, können Sie sich von Benutzern oder anderen Entwicklern helfen lassen, es zu testen und Feedback einzuholen. Nicht nur was die sagen, sondern was sie tun. (Beispiel: Die Leute sagen, sie mögen keine überfüllten Inseln bei Walmart, aber sie haben buchstäblich mehr als 1 Milliarde Dollar Umsatz verloren, als Sie das Durcheinander beseitigt haben.)


3
+1 für das Prototyping. Generieren Sie eine ganze Reihe von Ideen, anstatt sich auf die "1 beste Idee!" Zu konzentrieren. Zeigen Sie dann Ihre Prototyp-Ideen einer Reihe von Menschen. Sie erhalten viel Feedback und können Ihr Design verfeinern.
Stephen Gross

[Walmart] verlor buchstäblich mehr als 1 Milliarde US-Dollar an Verkäufen, als das Durcheinander beseitigt wurde. Zitat?
Funkybro



1

Ich befolge immer die Regel, Klicks und Tastenanschläge zu minimieren. Ich bin nicht sehr gut darin, eine sexy aussehende Benutzeroberfläche mit vielen Farben und prall aussehenden Schaltflächen zu erstellen, aber Benutzer sagen mir, dass die Verwendung meiner Benutzeroberflächen ein Kinderspiel ist. Hier ist eine.

Eines der Dinge, die ich entdeckt habe, ist, dass Benutzer sofortige Reaktionen lieben . Es ist wie in Hollywood. Menschen lieben Pixel (vorzugsweise farbige Pixel). Sie lieben wirklich Pixel, die sich bewegen .

In dem Versuch, Benutzeroberflächen so zu gestalten und den Programmieraufwand zu vereinfachen, habe ich vor langer Zeit ein Schema entwickelt, das ich bis heute verwende - Differential Execution . (Ich kann nicht sagen, dass ich viel Glück hatte, es zu veröffentlichen, aber da ist es. Es wurde veröffentlicht, FWIW.)

Das sind nur meine zwei Cent.


Ihre Wiki-Seite wurde gelöscht. Ist es woanders?
Michael Riley - AKA Gunny

@Cape: Ja, ich wurde dort an den Knien abgeschnitten - etwas über Neologismus . Wie auch immer. Das SO-Tag "Differential Execution" hat mich dazu veranlasst, eine Implementierung auf SourceForge zu setzen. Es gibt auch Veröffentlichungen, von denen ich Ihnen gerne die neuesten zusenden werde, falls Sie eine Augenverglasung benötigen. Vielleicht deutlicher könnte eine Auktions-App sein, die ich vor ein paar Jahren gemacht habe und die ich dir zippen könnte. Es ist in VC6 (MFC) aber nicht groß und funktioniert gut.
Mike Dunlavey

@Cape: Tatsächlich hat meine Wikipedia- Benutzerseite es immer noch, aber wenn ich es mir anschaue, ist es nicht sehr gut.
Mike Dunlavey

Bei der Minimierung von Klicks und Tastenanschlägen sollten Sie die Kosten jedes Klicks berücksichtigen, wenn Sie darüber nachdenken. Normalerweise ziehen es die Leute vor, mehrere Klicks zu machen, die beinahe sinnlos sind, als einen, der etwas berücksichtigt. Offensichtlich sind weniger sinnlose Klicks besser als mehrere sinnlose Klicks. Dieses Prinzip wird ein wenig in Don't Make me think besprochen .
Whatsisname

@whatsisname: Danke für diesen Einblick. Ich versuche, den "Weg des geringsten Widerstands" zu beschreiten, den die Leute am ehesten wollen. Kann es aber nicht immer tun.
Mike Dunlavey

1

Ich denke, der erste Schritt besteht darin, einen Stil / ein Thema zu bestimmen. Zum Beispiel Windows 8 Metro vs. NT-Stil.

Einige Vorschläge für Ressourcen und Inspiration (ich erwähne WPF / Web, aber Sie müssen es natürlich nicht verwenden):

A - Wenn Sie mit dem Prototyping beginnen möchten, sind die Steuerelementstile hier coole Websteuerelementstile und -steuerelemente

B - Component Factory verleiht Fensterformen ein gutes Facelifting - Sie bieten sogar ein kostenloses Produkt an: Component Factory

C - GUI-Steuerungshersteller von Drittanbietern haben gut aussehende Demos

D - Versuchen Sie, auf dieser Website nach dem Wort "Bücher" zu suchen: Benutzererfahrung - Sie erhalten zahlreiche Beiträge.

E- Diese WPF-Anwendung: WPF Health Care Application

F - Diese WPF-Anwendung: Billy Holis - WPF und die fertige Version auf: WPF - StaffLynx

Wenn Sie möchten, gibt es Tools im G-Metro-Stil. Überprüfen Sie dies: Metro Style

Am wichtigsten ist, wie Sie vielleicht bereits wissen, die Balance zwischen Aufwand und Wert.

Bearbeiten

DevXpress hat eine neue Version unterstützt Metro - Stil veröffentlicht, gesehen nur das Video toady DevXpress-2


1
Der Link für E - WPF-Health Care Application ist unterbrochen.
Michael Riley - AKA Gunny

@CapeCodGunny, danke für den Hinweis, es sollte jetzt OK sein :)
NoChance

0

Ich kann Edward Tuftes Buch The Visual Display of Quantitative Information nicht genug empfehlen . Lässt dich wirklich darüber nachdenken, was du präsentierst und warum. Alle seine Bücher sind gut, aber ich beziehe mich am häufigsten auf diese.

Ein gutes "UI Design Pattern" Buch, das ich gefunden habe, ist das Entwerfen von Schnittstellen . Es enthält Abschnitte zum Entwerfen von Layouts, zur Navigation, zum Anzeigen komplexer Informationen und zum Entwerfen von Eingabeformularen. Es gibt ein ähnliches Buch über das Entwerfen sozialer Schnittstellen (mit dem passenden Namen " Entwerfen sozialer Schnittstellen" ), aber ich habe es nicht gelesen und weiß nicht genug, um es zu empfehlen.


Was ist eines der nützlichsten Dinge, die Sie in Tuftes Buch entdeckt haben? Wie hat es dein Denken verändert?
Michael Riley - AKA Gunny

Glauben Sie wirklich, dass dies ein gutes Buch für Anfänger ist, um ein einfaches UI-Design zu entwickeln? Ich nicht. Es ist ein wertvolles Buch, aber es ist ein bisschen so, als ob man ihnen vorschlägt, ein Restaurant zu eröffnen, wenn man nur eine Menge Kekse backen möchte.
Bryan Oakley

@CapeCodGunny: Die Dinge, die mir wirklich am Herzen liegen, sind seine Dekonstruktion typischer Präsentationsstile, die auf das Nötigste reduziert werden (Kap. 6) und der Abschnitt "Grafische Integrität".
TMN

@BryanOakley: Er sagte, er habe den Bildschirm zum ersten Mal für eine Bildschirmauflösung von 640 x 480 entworfen, das muss einige Jahre her sein, daher bezweifle ich, dass er ein Anfänger ist. Und er gab keinen Hinweis darauf, dass die Benutzeroberfläche einfach war (oder nicht). Ich habe nur einige Ressourcen erwähnt, die mir geholfen haben, als ich anfing, Benutzeroberflächen zu entwerfen, anstatt nur ein paar Textfelder und Beschriftungen auf den Bildschirm zu kleben.
TMN

@Bryan - Mein Produkt ist 20 Jahre alt und wurde von DOS auf Windows umgestellt. Es verkauft sich immer noch, ist aber veraltet.
Michael Riley - AKA Gunny

0

Es gibt einige gute Bücher, die bereits empfohlen wurden. Die UX Stack Exchange-Website ist für Fragen wie diese besser gerüstet, aber sie ist auch kein Thema.

In erster Linie ist mediaqueri.es eine großartige Ressource für Ihr spezielles Problem, da es sich um eine Sammlung von Websites und Webanwendungen handelt, die so gestaltet sind, dass sie an unterschiedliche Bildschirmauflösungen und Benutzerprogramme angepasst sind.

Medien-Anfragen

Schauen Sie sich auch das Smashing Magazine an . Dieses Blog ist ein Paradies für Front-End-Entwickler mit Beiträgen zu UX / UI, HTML / CSS / Javascript, Grafikdesign und Webdesign. Sie haben auch Posts, die sich mit bestimmten Websites und Marketingkampagnen befassen und herausfinden, was sie mit ihren UI / UX-Entscheidungen richtig (und falsch) gemacht haben. Überprüfen Sie diese Site regelmäßig auf tägliche Tipps zu diesen Themen.

Wenn Sie sich inspirieren lassen, werfen Sie einen Blick auf einige SO / SE-Fragen, die ich speziell zu diesem Thema gestellt habe. Dies sind nur allgemeine Ressourcen für jeden und nicht nur für OP:

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.