2: guidelines, patterns, begriffe

Transkript

1 USER_INTERFACE_DESIGN_08 2: guidelines, patterns, begriffe

2 guidelines, patterns, begriffe 2 : : wozu sind guidelines gut? : :»10 golden principles«des interface design : : wozu sind guidelines gut? : : praxistipps guidelines : : was sind patterns? : : 7±2 user interface patterns (2x täglich anwenden) mit beipackzettel : : praxistipps patterns : : zentrale konzepte und begriffe

3 arten von guidelines 7 prinzipien design guidelines regeln beschreiben die groben umstände und gegebenheiten

4 arten von guidelines 8 prinzipien design guidelines regeln gelten innerhalb eines kontexts, also etwa einer branche, einer plattform, einer technologie

5 arten von guidelines 9 prinzipien design guidelines regeln konkrete, praktische richtlinien für bestimmte situationen, elemente oder aktionen

6 10 golden principles verwende metaphern 02 wahre die ästhetische integrität 03 erhalte die konsistenz 04 vermittle stabilität 05 ermögliche direkte manipulation 06 lass die nutzer»sehen und zeigen«07 eröffne einen dialog, gib feedback 08 sei tolerant 09 keep it simple 10 übergib die kontrolle [essenz aus: - apple general design principles - 8 golden rules v. ben shneiderman - checklist of 10 principles v. jakob nielsen

7 1 verwende metaphern 11 metapher:»gedankliches bild«, das einen sachverhalt über die anwendung von analogie zu einem anderen sachverhalt beschreibt.

8 1 verwende metaphern 12 dabei sollen... aussehen interface-metapher: verwendung eines»wirklichen«objekts, um aussehen, interaktion, verhalten und wirkung eines bestandteils einer software zu erklären wirkung interaktion verhalten gleich sein!

9 spannungsfelder metaphern 13 : : erkennbar global : : konkret abstrakt : : alt neu

10 vorsicht 14 : : metaphern sind keine erfolgsgarantie!

11 2 wahre die ästhetische integrität 15 einfachheit klarheit artikulation : :»eine sprache sprechen«vs.

12 2 wahre die ästhetische integrität 16»hire a graphic designer«

13 spannungsfelder ästhetische integrität 17 : : design funktionalität : : programmierer designer nutzer : : formal lustig

14 3 erhalte die konsistenz 18 prinzip: übertragung des wissens konsistenz innerhalb der applikation... zwischen applikationen... mit den guidelines... mit den erwartungen der nutzer : : aussehen : : struktur und organisation : : text und sprache : : interaktion : : details (!) fonts, farben, icons, layout, anordnung, abfolge, menüs, hilfe, beschriftungen, formen, maus, tastatur, modifyer, cursor,

15 pfui

16 spannungsfelder konsistenz 20 : : einheitlichkeit unterscheidbarkeit : : uniformität identität : : standards innovation

17 4 vermittle stabilität 21 die wirklichkeit ist stabil! : : veränderungen nur mit : : wissen und : : zustimmung der nutzer (schlechtes) beispiel: selbstschliessende fenster

18 4 vermittle stabilität 22 elemente der stabilität : : wiederkommen = verlassen : : menüleiste, gleichbleibende menüpunkte : : gleiche befehle, gleiche kürzel : : hilfe-taste, exit-taste, home-taste : : ausstieg immer gleich (!Q, Alt-Shift-F4, etc.) : : nichts verschwindet einfach so

19 spannungsfelder stabilität 23 : : starrheit adaptivität : : stabilität flexibilität

20 5 ermögliche direkte manipulation»würden sie ihr fahrrad gerne mit cursortasten lenken?«24 : : ständige repräsentation : : physische aktionen der wesentlichen objekte und aktionen, an denen der nutzer gerade interessiert ist. bzw. deren analogie im system anstelle von komplexer syntax. : : schnelle inkrementelle und reversible operationen, deren effekt auf das betroffene objekt unmittelbar sichtbar sind.

21 5 ermögliche direkte manipulation : : nutzung unmittelbarer feedback-kreisläufe (hand-auge) 25 maus: angreifen und fühlen! : : sinnvolle mausgesten verstehen : : gestaltung für maus vor gestaltung für tastatur

22 spannungsräume direkte manipulation 26 : : terminal kinderspielzeug : :»einfache«nutzer»experten«? : : ingenieure rest-der-welt

23 6 lass die nutzer sehen und zeigen (wysiwyg) metapher: prüfung mit und ohne unterlagen 27 anders gesagt: was ist die herausforderung? find $HOME -name '#*' exec rm {} \; : : also: sehen & zeigen statt erinnern und tippen : : grund: so funktioniert unser denken (siehe kap. 4) : : stichwort»visuelles funktionsangebot«: : von innen: je direkter ich mit dem, was am bildschirm ist, arbeiten kann, umso besser : : von aussen: je direkter man mit den dingen [um die es wirklich geht]!arbeiten kann, umso besser

24 spannungsfelder sehen & zeigen [wysiwyg] 28 : : anfänger geübte poweruser : : messung gefühl : : konzept möglichkeiten : : ebene der darstellung benutzergruppe

25 7 eröffne einen dialog und gib feedback 29 dialog ist interaktiv wechselseitig potentiell synergetisch : : ziel: etablierung eines dialogs zwischen user und software

26 7 eröffne einen dialog und gib feedback 30 : : sofortiges feedback zu jeder aktion : : nicht stören! : :»runde«aktionen mit anfang und ende

27 7 eröffne einen dialog und gib feedback 31 mangel an dialog kommt unseren erwartungen in die quere, verunsichert uns damit und ist potentiell frustrierend.

28 7 eröffne einen dialog und gib feedback 32

29 minimales beispiel in zeitlupe 33 vorgang: durch antippen eines buttons wird eine liste von dingen angezeigt bedeutung deine aktion wurde registriert aktion - play»tick«aktion wurde verstanden, ist gültig ausführung von» «wurde begonnen - invert button - open empty list funktion dauert leider etwas - busy animation funktion abgeschlossen - information visible - button normal

30 7 eröffne einen dialog und gib feedback 34 : : zb. nicht: zwei dialoge direkt nacheinander : : zb. nicht: dreinreden

31 problem: mittelbarkeit 35

32 spannungsfelder dialog & feedback 36 : : entfernung modell : : ablauf störung : : explizitheit last

33 8 sei tolerant 37 die welt ist gefährlich! : : möglichkeit 1: ignorieren : : möglichkeit 2: einschränkungen : : möglichkeit 3: hinweise und warnungen

34 Alert Dialog Vorsicht Wenn sie weitergehen, dann fallen sie einen steilen Abhang hinunter. Dabei könnten Sie sich verletzen. Sind sie sicher, daß Sie weitergehen wollen? Stehenbleiben Weitergehen

35 8 sei tolerant 39 die welt ist gefährlich! : : möglichkeit 1: ignorieren : : möglichkeit 2: einschränkungen : : möglichkeit 3: hinweise und warnungen

36 ein echtes, tragisches beispiel 40 > del *.* Are you sure you want to delete all files in this directory? y Are you really sure? All data will be lost! y ERROR 12: frtnz.p can't be deleted ERROR 12: fnpr.p can't be deleted ERROR 12: fznpr.p can't be deleted ^C^C^C^C^C^C^C^C^C^C^C^C^C^C^C^C

37 8 sei tolerant 41 : : undo: ermöglicht herumspielen, ausprobieren : : fehlervermeidung: design for error/design for abuse : : fehlerbehandlung: einfach, verständlich, hilfreich

38 spannungsfelder toleranz 42 : : einschränkung eigenverantwortung : : undo machbarkeit

39 9 keep it simple 43 software muss so komplex wie nötig, aber so einfach wie möglich sein.

40 9 keep it simple 44»The hardest part of design, especially consumer electronics is keeping features out.«donald norman» they're just as smart about what they don't do. Great products can be made more beautiful by omitting things.«mark rolston vice president of creative, frog design

41 9 keep it simple 45 software muss so komplex wie nötig, aber so einfach wie möglich sein. : : unnötige funktionen streichen : : ein klares konzept erleichtert die entscheidungen : : ad-hoc funktionalität gut prüfen : : einfache implementierbarkeit ist kein kriterium!

42 9 keep it simple 46 : : klein, übersichtlich, anwendbar vs. umfangreich, verwirrend, unbrauchbar : : je mehr funktionalität, desto mehr bugs : : komplexität des ui = (funktionen)^2

43 9 keep it simple 47

44 10 übergib die kontrolle nutzer wollen die kontrolle über das, was sie tun 48 : : der nutzer sollte immer das gefühl haben, über alles, was passiert die kontrolle (aktiv und passiv) zu haben. : : ultimatives ziel: vertrauen der nutzer

45 10 übergib die kontrolle 49

46 10 übergib die kontrolle 50

47 10 übergib die kontrolle 51

48 10 übergib die kontrolle 52

49 10 übergib die kontrolle 53 zwei modelle: : : kaffeehaus : : kaffeehaus-küche

50 10 übergib die kontrolle 54 FINGER WEG! zwei modelle: : : kaffeehaus : : kaffeehaus-küche

51 10 übergib die kontrolle 55 Alert Dialog Das Kaffeehaus wurde unerwartet beendet Sie haben Ihren Kaffee gesalzen. Sie dürfen aber nur Zucker und/oder Milch in den Kaffee geben. Ok zwei modelle: : : kaffeehaus : : kaffeehaus-küche

52 10 übergib die kontrolle 56 : : der nutzer sollte immer das gefühl haben, über alles, was passiert die kontrolle (aktiv und passiv) zu haben. : : ultimatives ziel: vertrauen der nutzer schaffung einer in sich geschlossenen, konsistenten mikro-welt, in der die nutzer machen können, was sie wollen.

53 zusammenfassung 57 verwende metaphern wahre die ästhetische integrität erhalte die konsistenz vermittle stabilität ermögliche direkte manipulation und wysiwyg lass die nutzer sehen und zeigen eröffne einen dialog und gib feedback sei tolerant keep it simple übergib die kontrolle : : die berücksichtigung dieser konzepte wird beim design von software einen wesentlichen unterschied machen. : : immer nur so gut wie der, der sie anwendet.

54 zusammenfassung Good design means My rules! following rules!

55 zusammenfassung So, I can't just follow the rules?

56 zusammenfassung»obeying rules without an understanding of the reasons behind them creates an approximation of competence which leaves one vulnerable to the exceptions.«sea Kayaker's Deep Trouble

57 zusammenfassung 61 verwende metaphern wahre die ästhetische integrität erhalte die konsistenz vermittle stabilität ermögliche direkte manipulation und wysiwyg lass die nutzer sehen und zeigen eröffne einen dialog und gib feedback sei tolerant keep it simple übergib die kontrolle : : voraussetzung: verständnis der hintergründe;»einsicht«: : die berücksichtigung dieser konzepte wird beim design von software einen wesentlichen unterschied machen. : : immer nur so gut wie der, der sie anwendet. : : und: auch unter einhaltung aller guidelines kann man richtig schlechte interfaces machen : : im gegenteil: es gibt gute interfaces, die mehrere guideliens brechen (und genau deshalb gut sind) : : hmmmm

58 praxistipps erarbeiten sie für ihr projekt eigene richtlinien basis: zb. die hier vorgestellten 10 golden principles aber auch: graphische richtlinien (grid), verhaltensrichtlinien für sw, etc. 2. ändern sie die richtlinien nicht immer wieder wenn sie guidelines ändern müssen, muss wie bei software alles neu»getestet«werden 3. halten sie sich vorbehaltslos an die richtlinien nur dann machen sie sinn! 4. wenn sie die richtlinien brechen, dann ordentlich! inkonsistenz kann auch durch ausreichenden»abstand«vermieden werden!