ICON-DESIGN FÜR SMARTPHONES - Eine Methode zur Ermittlung der idealen Größe von Schaltflächen für mobile Endgeräte
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Tony Pucklitsch Christoph Ohl Heidi Krömker ICON-DESIGN FÜR SMARTPHONES Eine Methode zur Ermittlung der idealen Größe von Schaltflächen für mobile Endgeräte
Zielstellung
Wie groß müssen Schaltflächen auf einem
kapazitiven Touchscreen bei mobilen Endgeräten
dargestellt werden, um eine effektive und
effiziente Bedienung zu gewährleisten?
2
Kernpunkte
• Größenempfehlungen
– Hersteller-Styleguides, Normen / Richtlinien
– bisherige Studien
• Test-Design
• Zwischenergebnisse
• Schlussfolgerungen für die Gestaltung
3
Google Android
Vorschlag für Icon-Größe bei Tabs: 48x 48 px
• entspricht bei Motorola Milestone (WVGA854, 256 dpi)
4,76 x 4,76 mm
4
http://developer.android.com/guide/practices/ui_guidelines/icon_design.html
Apple iOS
Apple empfiehlt für Schaltflächen:
• 44 x 44 points
88 x 88 pixels
• iPhone 4: 960 x 640 px bei 326
dpi
• 6,9 x 6,9 mm
5
http://mattgemmell.com/2008/10/29/favorites-ui-design
Windows Phone 7
• Touch targets should not be smaller than 9 mm or 34 pixels square
and provide at least 2 mm or 8 pixels between touchable controls. In
exceptional cases, controls can be smaller but never more than 7 mm
or 26 pixels square.
• Touch targets should be larger than 9mm when touch controls are
frequently touched, create a severe error such as sending an
incomplete message, have a destructive consequence such as deleting
data, frustrate the user such as navigating to another screen
accidentally, are within 3.5 mm of the edge of the screen, or require
sequential or multiple inputs between adjacent touch controls.
6
http://go.microsoft.com/?linkid=9713252Norm / Richtlinie
„Bei rechteckigen Schaltflächen sollte die Schaltflächenhöhe
von 15 mm und die Schaltflächenbreite von 25 mm nicht
unterschritten werden. Bei quadratischen Schaltflächen
sollte die Kantenlänge von 20 mm nicht unterschritten
werden. Bei runden Schaltflächen sollte der Durchmesser
von 20 mm nicht unterschritten werden [2; 3].“
VDI-VDE 3850-2004 - Nutzergerechte Gestaltung von
Bediensystemen für Maschinen - Dialoggestaltung für Touchscreens
7Studien
Autor / Jahr Endgeräte Displaytech- Eingabetechnik Größen-
nologie empfehlung
Brewster,
PDA (3,3'') resistiv 2,5 mm²
2002
Mizobuchi et al.,
PDA (3,5'') resistiv 3 x 3 mm
2005
Parhi et al.,
PDA (3,5'') resistiv 9,2 x 9,2 mm
2006
Perry, Hourcade,
PDA (3,5'') resistiv 11,5 x 11,5 mm
2008
Lee, Zhai, Smartphone (2,8'')
kapazitiv 10 x 10 mm
2009 Smartphone (3,5'')
8Android-Test-Applikation
24 36 48 60 72 84
HTC Hero HTC Desire Motorola Milestone
320x480 (181 ppi) 480x800 (252 ppi) 480x854 (265 ppi)
Zusätzlich erfasste Daten:
Geburtsjahr, Geschlecht, Sehschwäche,
Farbfehlsichtigkeit, Touchscreen-Nutzung,
Händigkeit, Eingabetechnik
9Fehlerrate
100
90
Fehlerrate in Prozent (%)
80 73,8
70
60 53,8
50
40 36,1
30
22,7
20
12,8
8,3
10
0
~ 2,4 ~ 3,6 ~ 4,8 ~ 6,0 ~ 7,2 ~ 8,4
Größe der Zielfläche in Millimeter (mm)
10Fehlerrate
11ICON-GUIDELINES
Denke an Fitts‘ Law.
Lasse stets ausreichend Platz zwischen Icons.
Biete (visuelles) Feedback an.
Verwende keine Icons, die kleiner als 8x8 mm sind.
Verwende etablierte Konventionen.
(aber sei auch bereit, sie zu verwerfen, wenn sie nicht relevant sind)
12Ausgewählte Literatur
Alexander, Thomas; Leyk, Dieter; Schlick, Christopher (2007): „Empirische Untersuchung der Informationseingabe bei der mobilen
Mensch-Computer-Interaktion“. In: Zeitschrift für Arbeitswissenschaft. 1 (61), pp. 1-9.
Brewster, Stephen (2002): „Overcoming the Lack of Screen Space on Mobile Computers“. In: Personal and Ubiquitous Computing. 6
(3), pp. 188-205.
Fitts, Paul M. (1954): „The information capacity of the human motor system in controlling the amplitude of movement“. In: Journal of
Experimental Psychology. 47 (6), pp. 381-391.
Fujioka, Ryosuke; Akiba, Takayuki; Okada, Hidehiko; Salvendy, Gavriel; Smith, Michael (eds.) (2009): „Evaluation of Pointing Efficiency
on Small Screen Touch User Interfaces“. In: Human Interface and the Management of Information. Information and Interaction.
Berlin, Heidelberg: Springer 5618 (Id), pp. 375-384.
Lee, Seungyon; Zhai, Shumin (2009): „The performance of touch screen soft buttons“. In: Proceedings of the 27th international
conference on Human factors in computing systems - CHI ’09. New York, NY, USA: ACM Press pp. 309-318.
Mizobuchi, Sachi; Chignell, Mark; Newton, David (2005): „Mobile text entry: relationship between walking speed and text input task
difficulty“. In: Proceedings of the 7th International Conference on Human-Computer Interaction with Mobile Devices and
Services. New York, NY, USA: ACM Press pp. 122-128.
Parhi, Pekka; Karlson, Amy K.; Bederson, Benjamin B. (2006): „Target size study for one-handed thumb use on small touchscreen
devices“. In: Proceedings of the 8th conference on Human-computer interaction with mobile devices and services - MobileHCI
’06. New York, NY, USA: ACM Press pp. 203-210.
Perry, Keith B.; Hourcade, Juan Pablo (2008): „Evaluating one handed thumb tapping on mobile touchscreen devices“. In: Proceedings
of Graphics Interface Conference 2008 - GI ’08. Windsor, Ontario, Canada: Canadian Information Processing Society pp. 57-64.
13Sie können auch lesen
