{"id":302,"date":"2021-06-28T15:32:10","date_gmt":"2021-06-28T14:32:10","guid":{"rendered":"http:\/\/www.goesselgold.de\/blog\/?p=302"},"modified":"2023-11-22T18:15:48","modified_gmt":"2023-11-22T17:15:48","slug":"babylon-adobe-2021","status":"publish","type":"post","link":"https:\/\/www.goesselgold.de\/blog\/2021\/06\/babylon-adobe-2021\/","title":{"rendered":"Babylon Adobe, 2021"},"content":{"rendered":"\n

Wie konsistent gestaltet Adobe die Interfaces seiner Programme? Nicht so konsistent: Nicht mal so ein grundlegendes UI-Element wie der Speichern-Dialog sah 2017, als ich zuletzt geschaut habe<\/a>, auf MacOS in allen Programmen gleich aus. Nicht zwei Dialoge waren in allen Eigenschaften gleich, was schon eine erstaunliche Leistung ist. Und nur einer hielt sich an die Systemvorgaben von MacOS.<\/p>\n\n\n\n

Vier Jahre sp\u00e4ter: Die Apps liegen in neuen Versionen vor, und auch MacOS hat mit Big Sur das Interface stark umgestaltet. Was hat sich getan? Wir schauen uns eine etwas andere Auswahl von Programmen an, aber die Dickschiffe Photoshop<\/strong>, Illustrator<\/strong> und Indesign<\/strong> der CC-Suite sind wieder dabei \u2013 und ein interessanter Neuzugang kommt hinzu.<\/p>\n\n\n\n

Seht selbst. Spoiler: Es wird nicht besser.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Ein paar Beobachtungen: <\/p>\n\n\n\n

Keine App nutzt den Dialog, den Apple vorsieht und in seinen eigenen Apps verwendet.<\/p>\n\n\n\n

Photoshop<\/strong> und Acrobat<\/strong> verwenden das Alert-Modal, das Apple mit Big Sur eingef\u00fchrt hat. Immerhin, denn damit sehen Buttons wie Big Sur-Buttons aus und nicht wie fehlerhaft nachgemachte MacOS-Buttons. Der neue Apple-Dialog hat seine eigenen Probleme, aber die Apps w\u00fcrde Verbesserungen nach Systemupdates automatisch mitnehmen. Sonst alles fein? Nat\u00fcrlich nicht: Auch die beiden Dialoge von Photoshop und Acrobat machen nicht alles gleich. Erstaunlich, was sich alles unterscheidet: Gro\u00dfes App-Icon vs Warn-Icon mit Zusatz, Du vs Sie, Korrekte vs falsche Anf\u00fchrungszeichen, Zusatztext oder nicht.<\/p>\n\n\n\n

Die Dialoge von Illustrator<\/strong> und Indesign<\/strong> haben sich gegen\u00fcber dem letzten Mal (das ist jetzt vier Jahre her) nicht ge\u00e4ndert, au\u00dfer, dass die Fenstertitel jetzt den gleichen Grauton haben, weil sie den vom System \u00fcbernehmen. Die Buttons sind immer noch schlecht und verschieden selbstgemalt.<\/p>\n\n\n\n

After Effects<\/strong> hat den Default-Button Blau gef\u00e4rbt. Die Sekund\u00e4r-Buttons sehen immer noch wie keine der \u00fcbrigen aus. Einen Button umzuf\u00e4rben war wohl \u00c4nderung genug.<\/p>\n\n\n\n

In Adobe XD<\/strong> gibt es gar keinen Speichern-Dialog mehr. Jedes Dokument wird st\u00e4ndig in der Cloud gespeichert, auch neue Dokumente. Einerseits gut: Daten k\u00f6nnen im Prinzip nicht mehr verlorengehen. Andererseits schade, denn XD hat noch 2017 als einzige App Apples Guidelines befolgt, bis hin zum \u00bbSichern\u00ab-Label des Default-Buttons.<\/p>\n\n\n\n

Und dann gibt es noch Substance 3D<\/strong>, Adobes neuesten Zukauf. Wenn man sich dessen Dialogdesign anschaut, sehen alle anderen mit ihren Schw\u00e4chen gar nicht mehr so schlimm aus. Die Buttons mit den Labels Ja, Nein, Abbrechen, und das Riesen-Fragezeichen-Icon \u2013 wow.<\/p>\n\n\n\n

\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Sichern, HIG-Style<\/h2>\n\n\n\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

So sieht Apples Dialog aus, an den sich Adobe nicht h\u00e4lt. Man kann sich streiten, ob dieser Dialog zu komplex ist, weil er den n\u00e4chsten Schritt schon einbindet \u2013 aber wenn Adobe diesen Dialog n\u00e4hme, hatten sie immerhin kein Konsistenzproblem und keine h\u00e4sslich nachgebauten Interfaceelemente.<\/p>\n\n\n\n

Et tu, Microsoft?<\/h2>\n\n\n\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Auf den ersten Blick gar nicht \u00fcbel, aber auch Microsoft gleicht die Dialoge nicht an. <\/p>\n\n\n\n

Es gibt ein Farbsystem und der grunds\u00e4tzliche Dialog ist immerhin der gleiche, auch wenn mir komisch vorkommt, dass er kein einzelnes Fenster ist (das man f\u00fcr einen Screenshot einzeln ausw\u00e4hlen k\u00f6nnte). Das ist bei Photoshop anders. Aber:<\/p>\n\n\n\n

    \n
  • \u00bbSichern \u2026\u00ab (mit Leerzeichen) vs \u00bbSpeichern\u00ab vs \u00bbSpeichern\u2026\u00ab (ohne Leerzeichen) auf dem Button, <\/li>\n\n\n\n
  • \u00bbM\u00f6chtest du \u2026\u00ab vs \u00bbM\u00f6chten Sie \u2026\u00ab vs \u00bbSollen Ihre \u00c4nderungen \u2026\u00ab als Text,<\/li>\n\n\n\n
  • Warn-Icon vs App-Icon, Zusatztext oder nicht.<\/li>\n<\/ul>\n\n\n\n

    Ich frage mich, welche gleichen Funktionen die Produktteams noch unabh\u00e4ngig voneinander implementieren.<\/p>\n\n\n\n

    Sind gro\u00dfe Designsysteme unm\u00f6glich?<\/h2>\n\n\n\n

    Wieso gehen bei so gro\u00dfen Hersteller solche Dinge durch? Ich nehme an, das passiert gerade weil sie so gro\u00df sind. Die Produktteams sind sicher riesig. Jedes Team baut sein Ding getrennt, und weil \u00dcbergreifende Qualit\u00e4tssicherung teuer ist, und der Text in Sichern-Dialogen nicht das kritischste Feature, l\u00e4sst man es eben so. Au\u00dferdem m\u00fcssen die Programme auf Windows und Mac (und auch noch iOS und iPadOS) laufen, die alle ihre eigenen Vorgaben mitbringen. Also baut man selbst ein Interface, damit wenigstens die eigenen Programme gleich aussehen. Das geht aber eigentlich immer schief, wie man sehr deutlich sieht. Bei Adobe passiert das noch an vielen Stellen. Derselbe Befehl hei\u00dft in Photoshop \u00bbFarbfelder importieren \u2026\u00ab, in Illustrator \u00bbFarbfeldbibliothek \u00d6ffnen\u2026\u00ab und in InDesign \u00bbFarbfelder laden \u2026\u00ab. <\/p>\n\n\n\n

    Trotzdem. Adobe, ihr seid das Sinnbild f\u00fcr Design (oder wollt es zumindest sein). Da erwarte ich mehr.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Eine erneuter Blick auf den Stand der Interface-Konsistenz bei Adobe am Beispiel ihrer Sichern-Dialoge.<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Babylon Adobe, 2021 \u00e2\u20ac\u201c \u00c3\u0153ber die erstaunlichen Interfaceunterschiede bei Adobe und die offenbare Unm\u00c3\u00b6glichkeit, Programmoberfl\u00c3\u00a4chen konsistent zu gestalten.","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1,4],"tags":[15,18],"class_list":["post-302","post","type-post","status-publish","format-standard","hentry","category-allgemein","category-interface-design","tag-adobe","tag-interface-design"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p4vRUO-4S","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.goesselgold.de\/blog\/wp-json\/wp\/v2\/posts\/302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.goesselgold.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.goesselgold.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.goesselgold.de\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.goesselgold.de\/blog\/wp-json\/wp\/v2\/comments?post=302"}],"version-history":[{"count":28,"href":"https:\/\/www.goesselgold.de\/blog\/wp-json\/wp\/v2\/posts\/302\/revisions"}],"predecessor-version":[{"id":498,"href":"https:\/\/www.goesselgold.de\/blog\/wp-json\/wp\/v2\/posts\/302\/revisions\/498"}],"wp:attachment":[{"href":"https:\/\/www.goesselgold.de\/blog\/wp-json\/wp\/v2\/media?parent=302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.goesselgold.de\/blog\/wp-json\/wp\/v2\/categories?post=302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.goesselgold.de\/blog\/wp-json\/wp\/v2\/tags?post=302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}