Designing for E-ink devices


Published on

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.

Published in: Design, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Readability: -stable image, can be read in direct sunlight, contrast ratio similar to that of newspapers, font size can be adjusted Portability: -Light, portable, holds hundreds of books, progress, notes & bookmarks synced among devices Battery: - e-ink technology allows readers to hold static text and images indefinitely, without consuming any additional power.
  • Ghosting: - The shadow of a previously displayed image (ghost images) may be visible after refreshing parts of the screen. Ghost images are usually cleared out after the screen is refreshed several times . Interaction: - low refresh rate => no transition effects or animation. dynamic menus, scrolling, smooth zooming, page turns -long response times, bad feedback Design: -No guidelines, each reader has its own OS and browser => Different UI & Chrome
  • To find and identify the most problematic usability flaws and frustrating UX issues that users come across during interaction with e-ink readers.
  • -IA: Not intuitive, doesn ’ t conform to the patterns the users are used to. -Touch: problematic, takes too much accuracy and precision to hit target successfully, small-sized buttons & targets, 5-way navigation slow and frustrating -
  • -Links: maybe even dotted so regular underline is used for highlighting other aspects -
  • Designing for E-ink devices

    1. 1. Designing for E-ink devices:challenges, best practices & guidelines. Hany Rizk @myExpDesigned -
    2. 2. E-ink
    3. 3. Strong points• Readability• Portability• Battery life
    4. 4. Issues• Ghosting• Interaction• Design
    5. 5. Study• Heuristic Evaluation• Usability Test
    6. 6. Results• IA on the readers’ OS• Touch interaction• Long response times• Little visible feedback
    7. 7. 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.
    8. 8. • 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.
    9. 9. • Optimize your design for e-ink.• Use clear, intuitive graphics.• Leave no room for user-error.
    10. 10. 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.
    11. 11. • 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.
    12. 12. • Filters & other sorting methods should be provided for faster browsing in pages.• Provide signs of orientation to the user.