Lecture 5 - Tablet design - Interaction Design & Technologies

Exercise 3Task Recap / Challenge• Complex Information Hierarchy• Limited Screen Real Estate• Intuitive Navigation and Interaction

Exercise 3Common SolutionsIconsAccordion Navigation

Exercise 3Cool IdeasFind Item in StoreSearch Sort

What is so special aboutTablets?Short video segment from: http://allthingsd.com/20100607/steve-jobs-at-d8-the-full-uncut-interview/

Scope of Lecture• iPad / iOS Focus (mostly relevant for anytablet interface)• Usability• Interaction• Examples• Resolution Independent Design

Key Differences From Phones• Physically bigger footprint ==different interaction• More suitable for complex gestures• Increased screen real estate• Decreased mobility• In-depth content

iPad Usability StudyDealing with Fitts’ Law• Minimum Target1cm x 1cm (pixel universal)• Padding

iPad Usability Study• Avoid Crowded Targets• Ensure Gesture Discoverability• Remember Affordance!• Limit Text Input

Apple’s HIGGeneral• Enhance Interactivity• Reduce Full-Screen Transitions• Focused Information Hierarchy• Move Toolbar to the Top(Opposite of iPhone)• Support Both Landscape andPortrait

Apple’s HIGUIPopover• Transient• Additional Info• Context-AwareControls• Action Sheet• Modal

Apple’s HIGSplit View• Two Panes• Typically Master (left)Detail (right)• Detail > Master• Master as Popover inLandscape Orientation

Interesting ExamplesVideo: http://vimeo.com/39555472

Interesting ExamplesVideo: http://vimeo.com/26087817

Interesting ExamplesVideo: http://www.youtube.com/watch?v=fLqorTN0Gzs

Visual Calamity• Master Thesis• Interactive Information Visualization• Emergency Events Database (EM-DAT)• Focus on Augmenting InfoVis with TabletInterface Paradigm

Visual CalamityApplication Demo

Visual CalamityMultitouch Data Interval Controller (MDIC)• Multitouch• Communicating Affordance

Visual CalamityOverall Design Concerns and Priorities• Gesture Hinting / Interaction Affordance• Visual Consistency• Data-Pixel Ratio• Algorithmic Efficiency• Real Time Visual Feedback

Resolution Independent Design• Different Resolutions == Multiple PNGs• Alternative: Design through Code• iOS Quartz 2D: gradients, shadows, highlights• Designing in Code can be Confusing• Best of Both Worlds: PaintCode

PaintCodeVideo: http://www.youtube.com/watch?v=4tToyjrgFDY

Resolution Independent DesignPerformance Impact• Smaller binary == faster downloads• Complex drawing code expensiveDraw once!• Support different resolution?Just change numbers!