Promise of Zoomable User Interfaces

• 1. Ben BedersonHuman-Computer Interaction Lab Computer Science Dept.UMIACS / iSchoolUniversity of Maryland

2. Problem: Show More Than Fitson the screenSolution categories: Scroll Multiple pages (tabs, link, search ) Denser displays (info vis) Fisheye ZoomingIs always a problem and worse on small screens 3. Zooming Examples OS X Expose iPhone Google Maps Adobe PhotoshopTheme 1 Are ZUIs a success? When do / dont they work?Theme 2 How does innovation work? 4. Some early ZUIsPad 1993Pad++ 1994Pa3D 1993 5. Pad++ (1997 Video) 6. Partial Timeline PadDraw PadPrints PhotoMesa PPTPlexKidPad CounterPointPrezi GooglePivot Maps ZoomCanvasSpace-Scale DiagramsGeometric Scaling SDAZSemantic ZoomingPortals Lenses SVG .NET Pa3DJava2D Sea DragonPad Pad++Jazz Piccolo Cocoa WPF iPhone92 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 09 10 7. Animated Presentations KidPad - 1997 CounterPoint - 2001Microsoft PPTPlex - 2008Prezi - 2009 8. PhotoMesa First attempt at building polished consumer ZUI Object-based zooming Domain-specific navigation Domain-specific semantic zoom Auto-layout Perf tricks Metadata & search Mobile version 9. iPhoto & Picasa 10. Other Full Screen ZUIs Canvas for OneNote Seadragon (http://zoom.it) 11. Problems 12. What Happened? Eye candy that doesnt add much Dont scale well Datasets arent persistent Navigation mechanisms difficult Spatial memory not as good as hoped 2D layouts hard to scan People dont know where to zoom Difficult to author=> Insteadsimplelinear structureshierarchical structuresgeographic systemssearch 13. More Successful ZUIs Google Maps Wired on iPad 14. Wired Magazine on iPad 15. Mobile Zooming New interaction for touch screen Good for simple transitions what else?[Karlson, Bederson & SanGiovanni, CHI 2005] 16. Zumobi ZoomCanvas (2009)Zumobi ZoomCanvas Technology 17. ZUI Benefit Engaging Feels natural Improves some task performance Hurts other tasks More creative potential People like overviews Animation effective Structured content useful 18. ChallengesToo complex Hard to scale Hard to design & author Temporal separation requires STM to integratemultiple views Spatial memory & spatial navigation limited Navigation controls non-standard, tricky Remaining technical challenges 19. What is Innovation?Dictionary: "A new method, idea, product" "A creation resulting from study and experimentation" "The act of starting something for the first time" "Producing something like nothing done or experiencedor created before" 20. "There is nothing new under the sun-- Ecclesiastes 1:9Movie themes: Good vs. Evil Love conquers all Individual v. society Loss of innocence Man v. nature 21. How Do You Innovate?Bolt from the blue? Ideas when you Read the literature Competitive analysis Solve real problems Use available technologies Consider cost=> Innovations happen in a cultural context 22. Ad Campaign2001 23. Palm Pilot1996 24. Apple Newton Palm Pilot1993 1996 25. Dynabook Apple Newton Palm Pilot1980s 1993 1996 26. Dynabook Apple Newton Palm Pilot1980s 1993 1996 27. Is Nothing Innovative? Of course not The point is that innovation is more subtle than it firstappears 28. When is Copying Fair? Laws give us the societally accepted answer:Fine line between protecting invention Always...and stopping creative innovationExcept when protected by Copyright (concrete expression) Trademark (image, logo, short sequence ofwords) Trade secret (most things you dont tell others) Patent (processes, things, designs) 29. Patent Prosecution Prior art Invention 30. Patent Prosecution Prior art Invention 31. Patent Prosecution Prior art Invention 32. Patent Prosecution Prior art InventionPrior art 33. Patent Prosecution Prior art InventionPrior art 34. Questions?Benjamin B. BedersonComputer Science DepartmentHuman-Computer Interaction LabInstitute for Advanced Computer StudiesUniversity of Marylandwww.cs.umd.edu/~bederson @bederson