robbert ritmeester 2 juni 2009 widgets design voor kleine schermen testen van mobiele apps
TRANSCRIPT
Robbert Ritmeester
2 juni 2009
Widgets
Design voor kleine schermen
Testen van mobiele apps
What are Widgets?Widgets zijn lichtgewicht applicaties die gebruik maken van informatie op het web.
Gadget, badge, module, webjit, capsule, snippet, mini, flake
Miljoenen developers zijn vertrouwd met de webtechnologie: HTML, CSS en Javascript
Twee widgets kunnen beter zijn dan één
Open, scan de informatie en sluit – met een simpele optie om de settings te wijzigen.
Niet:
Camera
Contacten
GPS
Wel:
HTML
CSS
Javascript
Minder device
fragmentation
Widget
Camera
Contacten
GPS
Applicatie
Device
fragmentation
Camera
Contacten
GPS
Device
fragmentation
B ro w s e rA P I *
A P I
A P I
•Application programming interface, een verzameling definities waarbinnen computerprogramma's met elkaar communiceren ( routines, data structures, object classes and/or protocols provided by libraries and/or operating system services in order to support the building of applications.
Adobe Integrated Runtime (AIR) is a cross-platform runtime environment for building rich Internet applications using Adobe Flash, Adobe Flex, HTML, or Ajax, that can be deployed as a desktop application.
Tutorial Betavinehttp://www.betavine.net/bvportal/resources/
widgets/widgettutorialArtikel MobileCowboyshttp://www.mobilecowboys.nl/services/9667
Design
BeeldformaatPDA HP iPaq 320 x 240
N95 320x 240 maar is toch kleiner
HTC Touch 3G is ook 2240 x 320
Samsung Omnia 240 x 400
Iphone 320 x 480
Palm Pre 360 x 480
Nokia N5800 XpressMusic 360 x 640
Sony Ericsson Xperia X1 480 x 800
Een desktop van 1024 x 768 pixels heeft een pixel density van zo’n 85 ppi (pixels-per-inch).
Netbooks zoals de Asus Eee PC 900 heeft een scherm van 9 inch diagonaal waar 1024 x 600 pixels in zitten en heeft daarmee een dichtheid van 133 ppi.
Apple iPhone heeft een schermresolutie van 320 x 480 pixels en een 3.6" diagonaal beeldscherm: 160 ppi.
Nokia E60 heeft een schermresolutie van 416 x352 pixels en een 2.2" diagonaal beeldscherm: 240 ppi
Het onderstaande plaatje laat dezelfde afbeelding van 100 x 100 px zien op devices met pixel densities van 72, 144 en 240 ppi
Calculator
KleurdiepteN95 24 bit
HTC Touch 3G is ook 216 bit
Samsung Omnia 12 bit
Iphone 16 bit
Palm Pre 24 bit
Nokia N5800 XpressMusic 24 bit
Sony Ericsson Xperia X1 16 bit
Device Atlas
Twee ontwerpen voor alle toestellen met autorotate
LandscapePortrait
Use simple, readable fonts. For on-screen reading, sans serif fonts, such as Arial and Helvetica, are the best. Do not use small fonts. Remember that the application may be used under conditions in which reading text is difficult or by users with small visual impairments.Limit the number of font sizes, styles, and weights, and be consistent with the fonts used. This helps the user learn the application and aids readability.
Lettertype
Nokia Device Font Series 60
Devicefont: Helvetica
http://daringfireball.net/misc/2007/07/iphone-osx-fonts
IPhone
Tekst in Photoshop
Materiaal\key_3.fla
Adobe Device Central
Selecteer één toon (tint, kleur)Varieer met de Saturartion en de Brightness zodat een harmonisch
thema ontstaat zoals ‘koud’, ‘warm’, of neutraal
Eén toon
BUITEN TESTEN !
BUITEN TESTEN !
Harmonische combinatie van kleuren die dicht bij elkaar liggen
Eén toon
Complementaire kleuren liggen tegenover elkaar op de kleuren cirkel
Complementaire kleuren
BUITEN TESTEN !
Zo moet het dus niet!
• Maak een duidelijk onderscheid tussen waar je wel en niet op kan klikken
• Stylis of touch-screen niet door elkaar gebruiken
• Touchscreen knoppen van min. 8 x 8 mm
• Hotspot mag groter zijn dan de grafische knop:
Knoppen
BUITEN TESTEN !
Focus
• De achtergrond moet minder gedetailleerd zijn dan de voorgrond. (o.a vanwege zonlicht)
• Nadruk op de voorgrond• Voorgrondelementen met border of
schaduw• Duidelijke focus
BUITEN TESTEN !
Focus
BUITEN TESTEN !Zo m
oet het d
us niet!
BUITEN TESTEN !
Zo moet h
et dus n
iet!
Testen
Veel!
Zo moet het dus niet!
Wat is anders?• De gebruiker wordt waarschijnlijk afgeleid
Stapt in de trein; moet op het verkeer letten, binnekomend telefoontje enz.
Zorg ervoor dat de gebruiker zijn taak snel kan uitvoeren of kan onderbreken (mededelingen blijven op het
scherm staan totdat de gebruiker weer reageert.
• Het invoeren van tekst is onhandig(er).
Zelfs als een mobile device een QWERTY keyboard heeft. Laat de gebruiker keuzes maken ipv invoeren.
• Klein scherm
ppi (pixels-per-inch) – storend licht enz..
• De context van de gebruiker
Omgevingsgeluid, hard licht, in een restaurant of concertgebouw, enz
http://www.balsamiq.com/products/mockups
• SatisfactionAnonymous questionnaire• EfficiencyTime to perform certain task(s)• LearnabilityTime to reach certain stage(s)• ErrorsNumber of errors, while using a system, in certain task(s)
Evaluatie mobile interaction design
A design solution can be critically evaluated by asking the following set of questions:
1. Does the application allow fulfilling the main user tasks efficiently?
2. Is the navigation model clear and intuitive and consistent?
3. Is information and content presented clearly?
4. Is the language and terminology familiar to the user and used consistently throughout the application?
5. Are controls used consistently within the application and in relation to the platform style?
6. Does the application provide relevant feedback to the user?
7. Is information entry made as easy as possible?
8. Does the application guide the user and provide help if necessary?
9. Does the application cope well with error situations: are they easy to understand and can the user recover
easily?
10. Is the design simple and desirable – does it include everything necessary but nothing extraneous?
1. Requirements definition The concept is defined and tested. Some critical element of the application idea may need to be modified or the entire concept abandoned.Expert analysis: Find out and correct critical flaws in the concept. Competitive analysis: Study how users are currently using competitive products.User and task analysis: Find out if users are interested to use and buy the product.
2. Design and implementation Functional, technical, and usability specifications for the implementation are defined. This phase is returned to multiple times after the testing phase, until the product meets the requirements set for it. Usability design: Use guidelines and checklists to verify that the implementation does not violate existing standards. Use design templates to avoid common problems. Expert analysis: Evaluate prototypes on how to improve the user interface and avoid problematic designs. Individual or group usability testing: Testing paper prototypes or actual product prototypes with real users. Consulting: Avoid delays in the development process by consulting usability experts on specific areas.
3. TestingThe system is tested thoroughly to make sure it meets the requirements set at the beginning of the process. It is very important to conduct also system-level testing, that is, testing also installation, deployment, and configuring the application. Expert analysis: Make sure the user interface is functional, without severe flaws and receive improvement suggestions. Individual usability testing: Find out how real end users use the application and where they have problems. Group usability testing: The interaction between users is tested. Results may be surprising and users may find ways to cause errors in the application.
4. Release to the public. Research is needed to find out about user acceptance, and what functional, technical, or usability components can be added or improved for future releases. Satisfaction survey: Receive statistical information on which parts of the application users like and which need improvement. In addition, the effects of possible usability problems can be evaluated. User analysis: See how well the product fits into the user group for which it was intended. 5. Maintenance The product may require changes or updates, different language versions, or porting to new devices. Group testing: How would users modify the application? What would prompt them to update or buy another version? Satisfaction survey: Competition may affect users' attitudes and requirements. In addition, the users have had a longer time to evaluate the application.User and task analysis: See how well the product fits into the user group for which it was intended.
Toverwoorden
X- Nu- Hier- Ik- De ander- Vragen
- Werk- Onderweg- Winkel- Thuis- Wachten