©Hochschule Magdeburg-Stendal // Cross Media // Designing Interactions in XS

Unterlagen für den WorkshopDesigning Interactions in XSStand März 2012

Carolin BaierStefan BauerschäferAnja GuseBeate MittelmeyerRobert RichterAlexander SchierhornClara WeyhenmeyerProf. Dr. Christine Goutrié

Graphical User Interfaces

Nutzungsumfeld und -situationenKategorisierung von GerätenEingabe für mobile GeräteDisplaytechnologienAuflösung von Displays und Pixelbildern Graphical User InterfacesNavigationsstrukturenMentale Modelle und MetaphernIcon EntwicklungGrafische Gestaltung: FarbenGrafische Gestaltung: Schriften

©Hochschule Magdeburg-Stendal // Cross Media // Designing Interactions in XS Seite 1

Allgemeine Anforderungen an GUI1

• Aufgabenangemessenheit=Funktionalität,MinimierungunnötigerInteraktionen (FunktionalitätundDialogsindderArbeitsaufgabeangepasst)• Selbstbeschreibungsfähigkeit=VerständlichkeitdurchHilfen/Rückmeldungen (jedereinzelneDialogschrittwirddurchRückmeldungunmittelbarverständlichoder demBenutzeraufAnfrageerklärt)• Steuerbarkeit=Schaltflächen,Icons,MenüeinträgemiteinfachenDialogwegen/ Bedienungsschrittesolltenjederzeitaufhebbarundrückgängigzumachensein• Lernförderlichkeit=UnterstützungundAnleitungbeiderErlernungderNutzung einesinteraktivenSystems(Ziel:minimaleErlernzeit)• Erwartungskonformität=Konsistenz,AnpassunganBenutzerstand (Anfänger,GelegenheitsnutzeroderExperte:Bedienungsabläufe,Symboleund AnordnungvonInformationensollteninnerhalbderAnwendungkonsistentseinund demerworbenenWissenderBenutzerentsprechen)• Fehlertoleranz=AufrechterhaltungdesSystemsundKorrekturmöglichkeitenbeifeh- lerhafterBedienung(EinDialogistfehlertolerant,wenndasbeabsichtigteArbeitser- gebnistrotzerkennbarfehlerhafterEingabenentwedermitkeinemodermitminima- lemKorrekturaufwanddurchdenBenutzererreichtwerdenkann)• Individualisierbarkeit=AnpassbarkeitanBenutzerundseinenArbeitskontext (Fenstereinstellungen,Sortierungen,Symbolleisten,Menüs,Tastenkürzel,Funktions- tastenetc.solltenindividuelleingestelltundgespeichertwerdenkönnen)

FAZITDieSchnittstellemussvorallemfolgendePunkteerfüllen:Siemussintuitivsein,sichflüs-sigbedienenlassenunddemBenutzeralleFunktionenzurVerfügungstellen,dieervomGeräterwartet.

Graphical User Interfaces (GUI)

PrototypenausdemDesignlabor:

EinfacheDialogwege,AnpassunganBenutzerstand

(Quelle:http://www.pixden.com,Rev.2012-02-10)

ErsterEntwurfeinerBenutzeroberfläche:

waserwartetderNutzervomGerät?

(Quelle:DiegoWyllie)

1Schneider,W.(2008):ErgonomischeGestaltungvonBenutzungsschnittstellen-KommentarzurGrundsatz-

normDINENISO9241-110.BerlinWienZürich:BeuthVerlag

EntwurfvomStartbildschirmiPhone5

(Quelle:http://www.gamestar.

de/_misc/images/original.

cfm?pk=2238909,Rev.2012-03-14)

GeräteübergreifendeStandard-Anordnungvon

Statusbar,

Icondeskund

Favoritenbar.

EntwurfvomStartbildschirmiPod5G

(Quelle:http://www.xboxmb.com/

forum/31-graphic-design/31569-

ipod-touch-5g-concept-d.html,Rev.

2012-03-14)

©Hochschule Magdeburg-Stendal // Cross Media // Designing Interactions in XS Seite2

Apple: iOS2

DieOberflächefürdieApple-ProdukteiPhone,iPodtouchundiPadlässtaufgrundihrerstandardisiertenVorgabenrelativwe-nigGestaltungsspielraum.Dasistdurchausbeabsichtigt:DerUsersollsichangesichtsdesimmerwiederkehrendenDesignsgewis-sermaßenwie zu Hausefühlen.AusgehendvoneinemStartbildschirm,derdurchWischennachlinkserweiterbarist,sinddiverseAnwendungenerreichbar.DiesesinddurchIconsdargestellt,derenDesigninvielenFällenganzklarvorgegebenist(Bsp.Sonnenblume-IconfürPhotos oder rot-weißesKalender-Icon).EineStatuszeileamoberenBildschirmrandinformiertüberNetzwerkempfang,UhrzeitundLadezustanddesAkkus.ÜberAntippenderHome-Taste(mittigunterdemhochfor-matigenBildschirm)wirdeineAnwendungminimiert,langesHaltenbeendetdieAn-wendung.InbeidenFällenkehrtderUserzumStartbildschirmzurück.

Graphical User InterfacesiOS: Eine Standard-Oberfläche für alle Apple-Geräte

2http://wikipedia.org/wiki/Apple_iOS,Rev.2012-02-10

WieallesbeiAppleunterliegtauchdieGUI-GestaltungbeiderEntwicklungderAppsklarenStandards:EntwicklerhabenjenachAnwendungz.B.vorgegebeneMaße,FarbenoderSchrifttypenfürSteuerele-mentezubeachten.InToolboxesstehensolcheElementebereitsfertigdesignedzurVerfügung.VorteileergebensichdarausvorallemfürlangjährigeApple-Nutzer,dasichimPrinzipalleswieineinemgeschlossenenSystemverhält.VieleempfindenabergeradedieseAbgeschlossenheitalsbeen-gendbzw.sogarinnovationshemmend.SokritisiereninsbesondereiOS-EntwicklerzustrikteVorgaben.PlattformübergreifendeEntwicklungensinddemnachnichtmög-lich.(AusnahmenbestätigendieRegel:SosolldieHTC-OberflächeSensewohlteilwei-seauchschonaufdemiPhonefunktionierthaben.3)

StandardisierteSteuerelementefürApple-BrowserSafari:

• iPhoneStatusbar

• TitlebarmitTextboxbzw.Pulldown-Menü

• iPhoneKeyboard

(Quelle:http://designerstoolbox.com/designresources/iphone

Rev.2012_03_14)

©Hochschule Magdeburg-Stendal // Cross Media // Designing Interactions in XS Seite3

Graphical User InterfacesAllgemeine GUI-Bestandteile des Apple-Betriebssystems iOS

3http://www.chip.de/news/Hero-

Oberflaeche-HTC-Sense-laeuft-auf-

demiPhone_37664517.html,Rev.

2012-03-07

Open Handset Alliance: AndroidImUnterschiedzumApple-Standard-BetriebssystemiOS(dasausschließlichfürApple-Produktegedachtist),istAn-droideinBetriebssystem,dasvoneinemFirmen-Konsortiumnamens„OpenHandsetAlliance“entwickeltwird.ZudenGrün-dungsmitgliederngehöreneinerseitsinter-nationaleNetzbetreiberwieChinaMobile,T-MobileoderTelecomItalia.AberauchGeräteherstellerwieHTC,MotorolaoderSamsungElectronicssindvonBeginnandabei.NichtzuvergessenSoftware-Firmenwieebay,Myriadund-allenvoran:Google.Aktuellbefindensich84FirmenindiesemKonsortium,federführendistGoogle.4

EntsprechendvieleGeräteanbieternutzenAndroidalsBetriebssystem:LautGooglewerdentäglichüber850.000neueAndroid-Geräteaktiviert.5

VieleverschiedeneOberflächen:dasAndroid-BetriebssystemtrittaufSmartphonesselteninReinformauf

(Quelle:http://www.chip.de/artikel/TouchWiz-Sense-Blur-Co-User-Interface-fuer-Android-im-Test_47570461.

html,Rev.2012-03-10)

VieleHersteller,diemitAndroidarbei-ten,habenihreeigeneBedienoberflächeentwickelt.SienutzenzwaralleAndroidalsBetriebssystem,grenzensichjedochdurchunterschiedlicheBedienoberflächensicht-barvoneinanderab.Hinzukommt,dassalleinvonAndroidmeh-rereVersionengleichzeitigaufdemMarktsind,diepermanentweiterentwickeltwer-den.DiederzeitaktuellstevierteAndroid-Versionheißt„IceCreamSandwich“.SieistseitOktober2011mehrmalsverbessertworden.VersionfünfistEndeFebruar2012aufdemMobileWorldCongressvonGoogleangekündigtworden.6

©Hochschule Magdeburg-Stendal // Cross Media // Designing Interactions in XS Seite4

Graphical User InterfacesAndroid: Eine Plattform für viele Geräteanbieter

4http://www.openhandsetalliance.com/oha_members.html,Rev.2012-03-10

5http://googlemobile.blogspot.com/2012/02/androidmobile-world-congress-its-all.html,Rev.2012-02-27

6http://www.computerworld.com/s/article/9224652/Google_exec_hints_of_Android_5.0_release_this_fall_,

Rev.2012-02-27

DieVielfaltderjenachGeräteherstellervariierendenBenutzeroberflächenmachteineverallgemeinerteBeschreibungderGUIrelativschwierig.Dennochistauffäl-lig,dassbestimmteElemente,dieausderAndroid-Strukturvorgegebensind,auchbeideneinzelnenHersteller-Oberflächenimmerwiederkehren(sieheAbbildung).DieAnordnungvonStatuszeile,durchWischenerweiterbaremHomescreenundIconbarerinnertsehrandieOberflächenan-ordnungvomiPhone.AuchbeimAndroid-SmartphoneerreichtderUserdiemeistenFunktionenübereinenTouchscreen.DiverseWidgets,ProgrammfensterundIconslassensichjenachOberflächebeliebiganordnenundversprechenIndividualisierbarkeit.CharakteristischfürdiemeistenAndroid-SmartphonesistdieAnordnungvondreibisvierHardwaretastenimvertikalenunterenBereich,diezumeistalsHome-,Back-undOptionsbuttonbelegtsind.

HTCSensationICSmit

Sense-Oberfläche

Statuszeile

Homescreen

Iconbar

Hardwaretasten

Android4.0-Oberfläche

©Hochschule Magdeburg-Stendal // Cross Media // Designing Interactions in XS Seite5

Graphical User InterfacesAllgemeine GUI-Bestandteile des Open-Source-Betriebssystems Android

MOTOROLADEFYmit

Motoblur-Oberfläche

SAMSUNGGalaxyAcemit

Touchwiz-Oberfläche

Microsoft: Windows PhoneObwohlWindowsdasweltweitmitAbstandamweitestenverbreiteteBetriebssystemimPC-Sektorist,hängtMicrosoftaufdemmo-bilenSektorseitJahrenhinterderKonkur-renzhinterher.Dasmagdaranliegen,dasssichdieSmartphone-SoftwareWindowsmobilejahrelangstarkandenetabliertenDesktop-VariantenvonWindowsorientierteundgroßteilsnochdenEinsatzvonEinga-bestiftenerforderte.7

EndeAugust2010lieferteMicrosoftseinneuentwickeltesmobilesBetriebssystemanGeräteherstellerundPartneraus.8 WindowsPhone7isterstmalsfürdieBedienungmitFingernundMulti-Touchkonzipiert.MittlerweilebietenimmermehrSmartphone-HerstelleralternativzurAnd-roid-VersionaucheinGerätmitWindowsPhonealsOberflächean.GenanntseienandieserStelleSAMSUNG,HTCundLG.

OhneEingabestiftkaumzuhandhaben:

WindowsmobileinAnlehnunganDesktop-Variante

(Quelle:www.lrz.de/services/netz/mobil/802_1x/

pda-w2005-802_1x,Rev.2012-03-11)

©Hochschule Magdeburg-Stendal // Cross Media // Designing Interactions in XS Seite6

Graphical User InterfacesWindows Phone: Vom Desktop zum Smartphone

FürMultitouchkonzipiert:WindowsPhone7istMicrosoftsSmartphone-

Lösung

(Quelle:http://smartphone7.de,Rev.2012-03-11)

7http://de.wikipedia.org/wiki/Windows_Phone#cite_note-2,Rev.2012-03-11

8http://www.areamobile.de/news/16395-windows-phone-7-entwicklung-offiziell-abgeschlossen,Rev.2012-03-11

Umzuvermeiden,dassderEinsatzvonWindowsPhoneanderHardwareschei-tert,hatMicrosoftstrengeVorgabenandieLizenzengeknüpft:Sosindz.B.ein800x480Pixel-Display,einEin-Gigahertz-ProzessorundmindestensachtGigabyteFestspeichervorgeschrieben.AuchdieBedientastenamvertikalenunterenRandsindfestgelegt:9einHomebuttonmitMicrosoft-LogoinderMitte,danebenlinkseinZurückbuttonundeinZoom-Buttonrechts.TypischfürdieOberflächevonWindowsPhoneistdasKachel-Menü.ÜberdenStartbildschirmlassensichdiewichtigs-tenFunktionenaufeinenBlickfinden.AndersalsbeiiOSoderAndroidistdieserHomescreenjedochnichthorizontalson-dernvertikalerweiterbar:SokommenperTouchslidenachobenoderuntenweitereVerknüpfungeninsBild,dieReihenfolgeundAnzahlsindindividuellanpassbar.DieKachelnzeigen–teilsanimiert–etwaungeleseneSMSoderE-Mails,verpassteAnrufe,Termineusw.DaszweiteMenüzeigtalleProgrammeundFunktionendesHan-dys.Eslässtsichnichtverändern(sieheAbbildungrechts).9

DasNokiaLumia710:EgalwelcherHerstellerWindowsPhone

alsOberflächebenutzt-dieHardkeyssindvorgeschrieben.

(Quelle:http://diepresse.com/home/techscience/mobil/

handytests/732391/Lumia-710_Nokias-Windows-Phone-von-

nebenan-im-Test,Rev.2012-03-11)

©Hochschule Magdeburg-Stendal // Cross Media // Designing Interactions in XS Seite7

Graphical User InterfacesAllgemeine GUI-Bestandteile des Microsoft-Betriebssystems Windows Phone

Vertikalstatthorizontal:derscrollbareHomescreenvonWindowsPhonelässt

sichindividuellerweitern

(Quelle:http://www.computerbild.de/artikel/cb-Tests-Handy-Windows-Phone-

7-HTC-7-Mozart-5661479.html,Rev.2012-03-11)

9http://www.computerbild.de/artikel/cb-Tests-Handy-Windows-Phone-7-HTC-7-Mozart-5661479.html,Rev.2012-03-11

VielehaltenApplesiPadbisheutefürüber-flüssig:kaumSchnittstellen,keinMultitas-king,keinFlashetc.AuchwennApplenievordergründigbeab-sichtigthatte,mitdemiPadeinenvollwer-tigenRechner-Ersatzzuliefern,sodeutetesichhierbereitsAnfang2010dieRichtungan:DerTouchscreen-Monitorwirdgrößer,undesistwohlnurnocheineFragederZeit,bisdie(grafische)Schnittstelle,diesichbeimSmartphonebewährthat,denherkömmlichenDesktop-Monitorkomplettablöst.InteressanterweisekommtdernächsteVorstoßindieseRichtungvonMicrosoft.GeradevorzweiJahrenhattemansichvonderdesktop-orientiertenSmartphone-OberflächeWindowsMobileverabschiedet.DieneueOberflächeWindowsPhoneweistnunwiederumdenWegfürdasBetriebssys-temWindows8,dasMicrosoftEndeFebruar2012ausgerechnetaufdemWorldMobileCongressvorstellte,derwichtigstenMessefürHandysundanderemobileGeräte.EssollsowohlfürdieBedienungperTouch-screenausgelegtalsauchfürMausundTastaturangepasstsein.EinReleasevonWindows8wirdfürHerbst2012erwartet.10

9,7Zoll-BildschirmbeieinerAuflösungvon264ppi:

DasneueiPadvonAppleerscheintam16.03.2012

(Quelle:http://www.psvita-forum.de/showthread.

php/3435-Das-neue-iPad-07.03.2012,Rev.2012-0311)

©Hochschule Magdeburg-Stendal // Cross Media // Designing Interactions in XS Seite8

Graphical User InterfacesAusblick: Smartphone-Oberfläche als Vorgabe für größere Bildschirme

VieleBildschirmgrößen,eineOberfläche:MicrosoftpräsentiertWindows8aufdem

WorldMobilCongressEndeFebruar2012inBarcelona

(Quelle:http://www.heise.de/mobil/meldung/Windows-8-Betriebssystem-fuer-alle-

Formfaktoren-1445786.html,Rev.2012-03-11)

10http://computer.t-online.de/windows-8-fuer-herbst-2012-geplant/id_47239334/index,Rev.2012-03-11