designing for e-ink devices
DESCRIPTION
The slides of my talk at UX Camp Europe '12, on Designing for E-ink devices. Focuses mostly on the set of design guidelines I've devised for E-ink devices.TRANSCRIPT
![Page 1: Designing for E-ink devices](https://reader035.vdocuments.us/reader035/viewer/2022081502/55422fec550346022e8b45f8/html5/thumbnails/1.jpg)
Designing for E-ink devices:
challenges, best practices & guidelines.
Hany Rizk@myExpDesigned - hanyrizk.com
![Page 2: Designing for E-ink devices](https://reader035.vdocuments.us/reader035/viewer/2022081502/55422fec550346022e8b45f8/html5/thumbnails/2.jpg)
E-ink
![Page 3: Designing for E-ink devices](https://reader035.vdocuments.us/reader035/viewer/2022081502/55422fec550346022e8b45f8/html5/thumbnails/3.jpg)
Strong points
• Readability
• Portability
• Battery life
![Page 4: Designing for E-ink devices](https://reader035.vdocuments.us/reader035/viewer/2022081502/55422fec550346022e8b45f8/html5/thumbnails/4.jpg)
Issues
• Ghosting
• Interaction
• Design
![Page 5: Designing for E-ink devices](https://reader035.vdocuments.us/reader035/viewer/2022081502/55422fec550346022e8b45f8/html5/thumbnails/5.jpg)
Study
• Heuristic Evaluation
• Usability Test
![Page 6: Designing for E-ink devices](https://reader035.vdocuments.us/reader035/viewer/2022081502/55422fec550346022e8b45f8/html5/thumbnails/6.jpg)
Results
• IA on the readers’ OS
• Touch interaction
• Long response times
• Little visible feedback
![Page 7: Designing for E-ink devices](https://reader035.vdocuments.us/reader035/viewer/2022081502/55422fec550346022e8b45f8/html5/thumbnails/7.jpg)
Guidelines - General Design
• Links should be underlined.
• Use font faces with slightly contrasting stroke weights.
• Use highly contrasting shades of gray together.
• Use black for the main text, and grey (italics) for secondary text.
![Page 8: Designing for E-ink devices](https://reader035.vdocuments.us/reader035/viewer/2022081502/55422fec550346022e8b45f8/html5/thumbnails/8.jpg)
• Use bold & bigger font sizes to highlight text importance.
• Display each page’s content in one screen, no scrolling.
• IA should be intuitive and similar to that of familiar tech devices.
• Be efficient with screen space.
• Don’t fill the screen with clutter.
![Page 9: Designing for E-ink devices](https://reader035.vdocuments.us/reader035/viewer/2022081502/55422fec550346022e8b45f8/html5/thumbnails/9.jpg)
• Optimize your design for e-ink.
• Use clear, intuitive graphics.
• Leave no room for user-error.
![Page 10: Designing for E-ink devices](https://reader035.vdocuments.us/reader035/viewer/2022081502/55422fec550346022e8b45f8/html5/thumbnails/10.jpg)
Guidelines - Interaction
• Show a change in color to highlight an element’s change of state.
• Tapped keyboard buttons should pop-up magnified, for visual feedback.
• Visual feedback should be given after actions (such as loading indicators).
• Button sizes on touch-screens should be large enough for easy access.
![Page 11: Designing for E-ink devices](https://reader035.vdocuments.us/reader035/viewer/2022081502/55422fec550346022e8b45f8/html5/thumbnails/11.jpg)
• Have sufficient space between interactive elements, to reduce imprecise tapping.
• Respect & apply Fitt’s law!
• Double pressing a navigation button should speed up navigation.
• Button-based devices should follow mobile usability guidelines.
• The cursor should be displayed in selected input fields for easy text editing editing.
![Page 12: Designing for E-ink devices](https://reader035.vdocuments.us/reader035/viewer/2022081502/55422fec550346022e8b45f8/html5/thumbnails/12.jpg)
• Filters & other sorting methods should be provided for faster browsing in pages.
• Provide signs of orientation to the user.