Graphic Design, UI/UX Design, and Visualization for elearningg August 23 & 24, 2012 601 Design Mobile First to Improve User Experience Phil Cowcill, Canadore College
August 24, 2012 Email: Phil.Cowcill@canadorecollege.ca Twitter: @CanadianPacMan Overview Introduction What is User Experience Project Setup Less is More Tips / Guidelines Summary Page 2of 34 Session 601 Design Mobile First to Improve Page 1
Phil Cowcill Started Multimedia Development in 1984/85 Programmer/Videographer for IVD Coordinator of Mobile Apps Dev / Advertising, Creative Media Canadore College Started Teaching Full Time in 1995 Page 3of 34 Phil Cowcill Author for Course Technology Focus on Developing Databases Driven Web Sites Michael Allen s elearning Annual 2012 Developed Number of Commercial CDs Numerous WBT Page 4of 34 Session 601 Design Mobile First to Improve Page 2
Phil Cowcill Regular Speaker throughout North America Page 5of 34 What is User Experience Referred to as UX More Important than Content Content is King Difference between Good App & Great App Determine How People Use Your App Alpha / Beta Tests Test Early in the Development Page 6of 34 Session 601 Design Mobile First to Improve Page 3
What is User Experience UX Covers a Lot Interface Work Flow Usability Intuitive Navigation Interaction Architecture of an App Page 7of 34 What is User Experience Page 8of 34 Session 601 Design Mobile First to Improve Page 4
What is User Experience Is Positive UX Consistent Among Users? NO There are Tips to Enhance UX Follow these Steps Page 9of 34 Project Setup Touch Areas Need to be Larger than Mouse Areas Turn on Grid Set to 20 x 20 Nothing EVER Smaller Page 10 of 34 Session 601 Design Mobile First to Improve Page 5
Project Setup Android Devices: Have 3 DPI Settings (160, 240, 320) Can Change the Size of Images Only for Native Java Applications Images in Web Apps & AIR Apps Are Consistent Page 11 of 34 Less is More Limited Real Estate on Tablets/Phones Hide Navigation / Buttons Bring Menu Out on Touch Look at the NASA Sample... Page 12 of 34 Session 601 Design Mobile First to Improve Page 6
Less is More Page 13 of 34 Less is More Page 14 of 34 Session 601 Design Mobile First to Improve Page 7
Less is More Page 15 of 34 Less is More Page 16 of 34 Session 601 Design Mobile First to Improve Page 8
Tip 1 Place Content on Top Place Navigation/Important Items on Bottom Why? Page 17 of 34 Tip 1 Page 18 of 34 Session 601 Design Mobile First to Improve Page 9
Tip 2 Consistent Layout Put Objects in Same Place Each Time Title Navigation/Option Content Feedback/Messages Page Counts Score Page 19 of 34 Tip 2 Create Storyboard Design Screen A Place for Everything Page 20 of 34 Session 601 Design Mobile First to Improve Page 10
Tip 3 Navigation / Interface Should be Intuitive Shouldn t have to Explain How to Navigate Navigation becomes Invisible Means Knowing Your Audience Teens vs Parents Page 21 of 34 Tip 3 Page 22 of 34 Session 601 Design Mobile First to Improve Page 11
Tip 4 Use Alpha Wisely Separates Content from Background Requires More Processing Page 23 of 34 Tip 5 Hide Menu Items Less is More Animate Menu Page 24 of 34 Session 601 Design Mobile First to Improve Page 12
Tip 6 Animate Items Don t Make them Drag Out Don t Animate Main Content Over & Over Animation Can Reduce Eye Fatigue Page 25 of 34 Tip 7 Avoid Buttons if Possible Use Tabs or Bars Page 26 of 34 Session 601 Design Mobile First to Improve Page 13
Tip 8 Keep Important Features Within Thumb Swipe Provide Right/Left Hand Option Move Buttons to Left or Right Side of Screen Page 27 of 34 Tip 8 Need to Watch Audience on How they Navigate Test Early in the Development Cycle Main Reason for Tabs or Bars vs. Buttons Page 28 of 34 Session 601 Design Mobile First to Improve Page 14
Tip 9 Landscape vs. Portrait Most Apps are Optimized for Portrait Landscape is Catching up Develop Flexible Design to Adapt to Both Views Goal is to Reduce Scrolling Page 29 of 34 Tip 10 Keep Virtual Keyboards in Mind They Cover up Real Estate Space Page 30 of 34 Session 601 Design Mobile First to Improve Page 15
Tip 10 Most Web Login Pages Are Stacked Layout Text Fields in a Linear Fashion Page 31 of 34 Summary Review Good Apps What Would Make them Great Not Much Real Estate Less is More Consistent Layout Animate but Quickly Intuitive Interface Becomes Invisible Page 32 of 34 Session 601 Design Mobile First to Improve Page 16
Summary Hide Navigation until Selected Make Navigation Large Accessible for Right & Left Hand Thumb Swipe Design Portrait and Landscape Interface Layout Text Fields in Linear Style Place Navigation at the Bottom Page 33 of 34 Questions Phil Cowcill Email: phil.cowcill@canadorecollege.ca Twitter: @CanadianPacMan Page 34 of 34 Session 601 Design Mobile First to Improve Page 17