Wie kann man diese GUI für Smartphones verbessern?

Ich entwickle eine Android-App. Die GUI ist entworfen (und implementiert, kann sich aber im Moment noch ändern).

Fragen

  1. Die App wird unabhängig von der Umgebung (hell oder dunkel usw.) verwendet. Die Verbindung zum Internet soll schnell sein. Die Smartphones sollen mittlere oder große Bildschirme haben (kleine sind für diese App nicht sehr relevant). Wie könnte ich diese GUI für ein solches Display verbessern? (wenn benötigt)

  2. Ich habe das Gefühl, dass etwas grafisch fehlt, um die Benutzeroberfläche besser aussehen zu lassen. Insbesondere der weiße Block wirkt zu leer. Vielleicht ein transparentes Verlaufsbild von links nach rechts, das vom unteren Rand des roten Blocks zum unteren Rand des Smartphones verläuft und sich über den halben Bildschirm ausbreitet? Dieses Bild würde viele Verzierungen in Rottönen enthalten. Wie kann man diese GUI besser aussehen lassen? (wirklich nötig!)

Die GUI

Geben Sie hier die Bildbeschreibung ein

Mit einem Wort ... Kontrast.
In zwei Worten ... stellen Sie jemanden ein.
Bitte konzentrieren Sie sich auf eine Frage. Ihre zweite Frage ist zu allgemein und meinungsbasiert, um sie zu beantworten.

Antworten (2)

Ich wollte nicht wirklich antworten, aber ich habe einfach alles, was ich dazu zu sagen hatte, in einem Kommentar herausgeplatzt und es wurde zu groß. Ich habe dies spät um 2 Uhr morgens auf dem Handy geschrieben, also kann es ein bisschen was auch immer sein. Vielleicht komme ich später wieder, um es aufzuräumen.

Es gibt überall Probleme. Es ist ein wenig seltsam, wie die Schriftgröße im Allgemeinen herumspringt.

1.)

Geben Sie hier die Bildbeschreibung ein

  1. Ich bin kein großer Fan davon, wie sich die Suchschrift von allem anderen unterscheidet und wie fett sie ist. Vielleicht sollte es die gleiche Schriftart wie der Haupttext an anderer Stelle verwenden.
  2. Da die Schriftart im Vergleich zu den Überschriften fett und relativ groß ist und da sich in dieser Suchleiste bereits das Hamburger-Menü befindet, sieht es ein bisschen so aus, als könnte es sogar ein Titel für diese Ansicht oder so etwas sein. Es ist nicht ungewöhnlich, dass sich die Sucheingabe nach einem Klick von selbst materialisiert, also wer weiß.
  3. Es gibt im Allgemeinen keine festen Regeln für diese Dinge, aber manchmal ist es gut, der Herde zu folgen und Grafiken zu verwenden, an die die Menschen im Allgemeinen gewöhnt sind, um die Dinge benutzerfreundlich zu halten. Ich bin mir sicher, dass so ziemlich jeder schon einmal jemanden, einen Verwandten oder einen Freund hatte, der sich darüber beschwert hat, dass eine Website ihr Layout geändert hat und es jetzt schlimmer ist, weil sie nicht wissen, wo sich alles befindet. Nehmen Sie sich die Freiheit, Dinge so zu gestalten, wie Sie möchten, aber seien Sie sich bewusst, dass Sie Menschen mit visueller Sprache verwirren könnten, die mit ihrem Gehirn kämpft. Der Punkt ist, dass es nicht allzu üblich ist, dass der Platzhaltertext für die Suche fett oder größer als der Haupttext ist.
  4. Vielleicht ist das nichts, aber ich habe das Gefühl, ich muss es erwähnen. Warum wird das Lupensymbol so seltsam und aliasiert dargestellt? Ich denke, es liegt nur daran, wie der Screenshot gespeichert wurde oder so, weil sogar die Uhr und die Symbole unten gleich sind.

2.)

Geben Sie hier die Bildbeschreibung ein

  1. Dies ist nicht unbedingt ein Problem, aber von diesen beiden Überschriften ist die untere etwas größer. Das wehrt sich (vielleicht) ein wenig gegen die Hierarchie.
  2. Sie sind mit der Hintergrundfarbe in ihre eigenen Blöcke unterteilt, wodurch die Hierarchie irgendwie zurückgesetzt wird.
  3. Wenn die unterste Überschrift dort beginnt, wo das Fleisch der Seite beginnt, dann habe ich keine Bedenken.
  4. Der Leerraum oder die Polsterung um die Überschriften ist inkonsistent ... was nicht unbedingt falsch ist, aber die Art und Weise, wie es inkonsistent ist, ist meiner Meinung nach.
  5. Die obere Überschrift hat eine obere Auffüllung von etwa 50 Pixel und die untere Überschrift hat eine obere Auffüllung von etwa 34 Pixel. Ich denke, sie sollten beide ungefähr 50 Pixel groß sein, oder weil der Bereich mit dem weißen Hintergrund so etwas wie der Inhaltsbereich ist, könnte diese Überschrift eine etwas größere Polsterung haben. Aber ich würde sagen, das hängt ein wenig davon ab, was der Text in jeder dieser Hälften sagt.
  6. Auch die untere Polsterung fällt etwas ab. Die obere Überschrift hat ungefähr 21 und die untere Überschrift ungefähr 26.
  7. Diese Unterschiede sind keine große Sache, aber manchmal blitzt unser Gehirn Warnungen auf, auch wenn wir nicht genau sagen können, warum. Kein Grund, diese nicht zu beheben.
  8. Vielleicht möchten Sie auch die Farben überdenken. Es ist ein wenig seltsam, dass der Haupttext auf dem weißen Hintergrund dieselbe Farbe hat wie die Überschrift darüber. Der Haupttext oben ist sehr unterschiedlich und ich würde auch sagen, dass der weiße Text vielleicht etwas zu weiß ist. Es springt Sie an, während der rote Text dies nicht tut.
  9. Hier muss ich noch einmal auf das Symbol hinweisen. Die Kanten sehen schrecklich aus.

3.)

Geben Sie hier die Bildbeschreibung ein

Jetzt, wo wir endlich zum Formularbereich gekommen sind (schätze ich ...), fangen die Probleme wirklich an. Hier gibt es alle Arten von Leerzeichen, die es schwierig machen, zu entziffern, was was ist. Es dauert eine heiße Sekunde, um überhaupt zu erkennen, was Sie sehen. Nachdem ich das letzte Nacht analysiert habe, bin ich jetzt überzeugt, dass es sich tatsächlich um eine Art Form handelt, aber als ich es mir das erste Mal angesehen habe, war ich mir nicht ganz sicher.

  1. Ich habe den gesamten Leerraum mit Farbe überflutet, um zu versuchen, visuell zu erklären, warum es ein wenig inkonsistent und seltsam ist. Es ist nicht ganz fair, da ich ein bisschen schnell und locker damit war, aber ich denke, es bringt den Punkt auf den Punkt.
  2. Ich denke, im Allgemeinen könnte dies viel von einem lineareren und vertikaleren Layout profitieren, das heißt: Jedes Element sollte eine eigene Zeile einnehmen und die gesamte Breite des Ansichtsfensters abdecken, außer dass der Knopf unten möglicherweise nicht voll sein muss Breite. Es ist einfacher, einfach von oben nach unten zu gehen, anstatt mit den Augen von links nach rechts zu suchen, wo ein Element beginnt und wo das nächste beginnt.
    • Manchmal macht es Sinn, Spalten zu haben, aber auf einem mobilen Gerät und mit dem Formular, wie es ist, denke ich, dass eine Zeile pro Element besser wäre.
    • Wenn diese App mit einem Tablet verwendet werden kann, könnte dieser Bereich möglicherweise eine maximale Breite haben und horizontal zentriert werden. Das ist nur eine Idee.
  3. Ich denke, all diese Formularelemente sollten wie ein Rahmen oder eine Hintergrundfarbe oder so etwas gegeben werden. Diese sind nicht immer notwendig, aber sehr effektiv, um den Blick von einem Element zum nächsten zu lenken. So wie es ist, würde es definitiv helfen, aber wenn jedes Element eine eigene Reihe bekommt, könnte das allein schon viel helfen.
  4. Etwas ausführlicher zu jedem Element:
    1. Dropdowns (+Text) – Die Lücke zwischen dem Text und dem Pfeil ist zwischen den beiden Dropdowns nicht konsistent. Es ist nicht unbedingt ein Problem, wenn man bedenkt, dass der eine die gesamte Breite des Ansichtsfensters überspannt (+ Polsterung) und der andere nicht, es ist unvermeidlich, aber ich denke, das allein lässt mich denken, dass sie beide die volle Breite des Ansichtsfensters überspannen sollten.
      • Das zweite Dropdown hat das 100dort mit einer großen Lücke und ich bin mir nicht sicher, ob es Teil des Dropdowns ist oder nicht. Es ist auch etwas leichter. Es ist schwer zu sagen, ohne auf das Dropdown-Menü zu klicken.
      • Der Text daneben kann auch maximal 3 Wörter in angemessener Größe pro Zeile enthalten, was ihn irgendwie vorantreibt. Es ist ein bisschen zu eng für Komfort.
      • Ich bin sicher, der Grund dafür, es dort zu platzieren, ist, dass es sich irgendwie auf dieses Dropdown-Menü bezieht, aber ich denke nicht, dass es schlimmer wird, es darüber oder darunter zu haben.
    2. Eingabe — Da dieser Bereich ziemlich chaotisch ist, hatte ich einen kurzen Moment, in dem ich nicht sicher war, ob dies eine Unterüberschrift oder eine Eingabe war.
      • Die Schriftgröße, die mit den Dropdown-Menüs übereinstimmt, zeigt an, dass es sich wahrscheinlich nicht um eine Überschrift handelt, aber andererseits ist dies ein sehr üblicher Stil für eine Überschrift.
      • Vielleicht könnte der Text grau sein, damit er eher wie ein Platzhaltertext aussieht.
      • oder vielleicht, wenn die Zeile auf der linken Seite des Textes beginnt, würde es nicht mehr wie eine mögliche Überschrift aussehen. Auf einem mobilen Gerät ist es nicht sehr machbar, wenn der Text nicht super kurz ist.
      • Hintergrundfarbe oder ein Rahmen oder Schatten würden wahrscheinlich sehr helfen.
    3. Bereichsschieberegler (+Schaltfläche) – Ich denke, dass ich es so wie es ist vertikal mit der Schaltfläche zentriert haben möchte, aber wenn jedes Element eine eigene Zeile erhält, wäre das nicht notwendig.
      • Eine verwirrende Sache hier ist, dass sich die Schaltfläche auf der rechten Seite des Bereichsschiebereglers befindet, was den Anschein erweckt, als ob sich die Schaltfläche direkt auf den Bereichsschieberegler bezieht und nichts mit einem anderen Element zu tun hat.
      • Die Akzentfarbe, die nur diese beiden Elemente in der Form gemeinsam haben, verstärkt diese Idee weiter.
      • Vielleicht sollte der Daumen des Bereichsschiebereglers stattdessen grau sein.
      • Vielleicht könnten alle Elemente diese Akzentfarbe irgendwie teilen. Ich glaube aber nicht, dass es einen guten Weg gibt, das zu tun. Eine Idee, die ich hatte, war, den Eingabetext und die Pfeile in den Dropdown-Menüs ebenfalls gelb zu machen, aber es ist wirklich der Eingabetext, bei dem ich denke, dass diese Idee auseinanderfällt. Es mag seltsam aussehen.
    4. Taste
      • Das erste, was mich stört, ist, dass oben und unten mehr Polsterung ist als an den Seiten. Es sieht einfach so aus, als wäre es dort eingepfercht und die Polsterung an den Seiten wurde reduziert, damit es passt. Aber Sie haben die obere und untere Polsterung intakt gelassen, weil vertikal mehr Platz ist.
      • Ich mag normalerweise mehr Polsterung an den Seiten für Knöpfe. Es gleicht es aus. Manchmal ist es sinnvoll, alle Seiten gleich zu polstern.
      • Dass das überhaupt wie ein Button aussieht, liegt nur an der Platzierung und daran, dass der Text so kurz ist. Es könnte von einem Schatten, Rand oder abgerundeten Ecken profitieren.

Ich habe ein kurzes Beispiel gemacht, in dem ich einige dieser Änderungen implementiert habe, über die ich gesprochen habe. Dies ist keineswegs wie ein produktionsreifes Layout. Es gibt viele Dinge, die mir daran nicht gefallen. Einige weitere Verbesserungen würden erfordern, den Kontext und die Notwendigkeit zu kennen, von denen ich keine Ahnung habe. Wie eine Sache ist der Ring-Schieberegler. Es gibt keinen klaren Hinweis darauf, was es tut.

Zumindest sollte dieses Bild die Idee vermitteln, dass man, wenn alles ordentlich gestapelt ist, nicht verrückt werden muss, um herauszufinden, was was ist.

Geben Sie hier die Bildbeschreibung ein

Ich habe viele Dinge aus der ersten Iteration dieser Antwort ausgelassen. Das Original finden Sie unter dem Bearbeiten-Link.

Vielen Dank! Dies ist ein Screenshot der Android-App. Das Fehlen von Rändern (und Farben) ist auf die Standardfeldkonfiguration von Android-Apps zurückzuführen. Sie haben keinen Rand, außer dem unteren Rand von Textfeldern. Ich habe nicht daran gedacht, sie hinzuzufügen. Tatsächlich habe ich nicht daran gedacht, meine Felder zu entwerfen! Danke noch einmal! Ich hoffe, es wird diesen Abschnitt weniger weiß machen. Vielleicht werde ich auch das transparente Bild mit Farbverlauf hinzufügen.
@JarsOfJam-Scheduler, ich habe die Antwort so bearbeitet, dass sie besser lesbar ist.

Aus meiner Sicht ist das Hauptproblem die von Ihnen gewählte große Serifenschrift. Dies ist natürlich meine eigene Meinung, aber ich mag es wirklich nicht und ich denke nicht, dass es zu dem anderen Text oder dem Rest des Designs passt oder es ergänzt.

Hier ist eine Liste von anderen Problemen, die ich sehe.

  • Es gibt zu viele verwirrende Variationen in Schriftfarbe, Größe und Unterschneidung
  • Das Logo ist ungünstig positioniert - es braucht etwas Platz drumherum.
  • Es gibt zu viele Farben, und sie sind nicht komplementär
  • Es ist nicht klar, was Dropdown-Optionen, Eingabefelder und Informationen sind
  • Dem Layout mangelt es an Ausgewogenheit und Leerzeichen werden nicht effektiv genutzt

Mein Rat wäre, das Design zu vereinfachen, es sauber zu halten, auf Leerzeichen zu achten und sie effektiver zu nutzen.

Dies ist eine grobe Skizze, aber so etwas sollte vielleicht veranschaulichen, was ich meine. . .

Geben Sie hier die Bildbeschreibung ein