Graphical User Interfaces Unterlagen für den Workshop ...Wie alles bei Apple unterliegt auch die...

©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)


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


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


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)


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)


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)


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

Graphical User Interfaces Unterlagen für den Workshop ...Wie alles bei Apple unterliegt auch die...

Documents

Transcript of Graphical User Interfaces Unterlagen für den Workshop ...Wie alles bei Apple unterliegt auch die...