1. INFSCI 1052 Adapted from O’Reilly Mobile Design and Development

2.  Modern mobile device capable of performing desktop functions  Modern mobile devices more than telephones  Desktop web applications made to be viewed in a browser on a large screen  Typically we are sitting when using desktop apps  http://www.webdesignerdepot.com/2009/05 /the-evolution-of-cell-phone-design-between- 1983-2009/ http://www.webdesignerdepot.com/2009/05 /the-evolution-of-cell-phone-design-between- 1983-2009/

3.  Brick Era  Very heavy and large  1980’s  Telephone functions only  Very expensive  Needed very large batteries  Too impractical for common usage

4.  Candy Bar Era  1990’s  Long, thin, rectangular form  2 G technology by carriers  Increased creation of cell towers  Decreased need for large batteries allowing to fit in pocket  Just for telephone usage  Introduction to Short Message Capability SMS

5.  Feature Phone Era  1998-2008  Telephone plus  Games  Applications  Texting  3G networks  Cameras  Initially focused on ringtones, wallpaper, games

6.  Smart Phone era  2002 – present – some overlap with other eras  Similar to feature phone but use a common operating system  Larger screen  Qwerty keyboard or stylus  Use WIFI

7.  Touch Era  IPhone – 2007  Not a phone or computer – it was something else?  Within four months became largest selling mobile device  Within six months the Iphone and 3G 10,000 applications donloaded over 300 million times – 2 million a day  Ecosystem

8.  Design for native applications or Web  Native applications  IOS  Android  Windows Mobile  Web  HTML 5  CSS  Use HTML5 and CSS then application usually lives on the Web – Web Server does the processing

9.  In the download space users decide whether to “buy” simply on text and some small screenshots. Failure to deliver almost instantly results in failure.  Question? How do I express my content across the most possible devices?  Flash  Apple Ecosystem – is it necessary  Try to satisfy every one can be problematic – looks bad. Lowest Common Denominator Design

10.  Apple App Store  People make decisions partly on the quality of the icon design  Users read reviews and examine quality of its icon and screenshots  Idea is to not design for everyone but target to a specific market  Design for the best experience

11.  CONTEXT  Who are the users? What do you know about them? What type of behavior can  you assume or predict about the users?  What is happening? What are the circumstances in which the users will best absorb  the content you intend to present?  When will they interact? Are they at home and have large amounts of time? Are  they at work where they have short periods of time? Will they have idle periods of  time while waiting for a train, for example?  Where are the users? Are they in a public space or a private space? Are they inside  or outside? Is it day or is it night?  Why will they use your app? What value will they gain from your content or services  in their present situation?  How are they using their mobile device? Is it held in their hand or in their pocket?  How are they holding it? Open or closed? Portrait or landscape?

12.  Message  Branding  Overall mental impression you create explicity through visual design  The instinctual reaction to your design  Sparse and minimalist vs rich and artsy  http://m.espn.go.com/wireless/ http://m.espn.go.com/wireless/  http://edition.cnn.com/mobile/nokia/ http://edition.cnn.com/mobile/nokia/  https://market.android.com/details?id=com.exelentia. wikipediamobile&hl=en https://market.android.com/details?id=com.exelentia. wikipediamobile&hl=en

13.  Look and Feel  Different than messaging which is more holistic  How will the user use the system  How will it feel to move about  The user will press this button because  The user will go to this screen because  Iphone apps use stock interface elements and prebuilt components and detailed Human Interface Guidelines  Inspiration for mobile  http://patterntap.com/ http://patterntap.com/  Some examples  http://www.noupe.com/how-tos/mobile-web-design-tips- and-best-practices.html http://www.noupe.com/how-tos/mobile-web-design-tips- and-best-practices.html

14.  Layout  Structural and visual components  Where should nav go?  Use tabs or lists?  Footer  Difference between layout and design  If asking for feedback users may give you feedback on design instead of layout. The colors or a raised look – this is design  Sometimes make the layout sketch “rough” to avoid design comments  http://www.middlenamejames.com/category/building- this-website/ http://www.middlenamejames.com/category/building- this-website/  http://www.duanefields.com/2011/02/ http://www.duanefields.com/2011/02/

15.  Fluid versus fixed based on landscape orientation  Color  Mobile screens bit depth varies  Psychology of color just as important as desktop  Typography  Device screens have different pixel density and subpixel technology(sharpening of text)  Limited typeface options

16.  Typography continued  Use a high-contrast typeface  Remember that mobile devices are usually used outside. Having a high-contrast  typeface with regard to the background will increase visibility and readability.  The type of typeface you use tells the user what to expect. For example, a sans-serif  font is common in navigation or compact areas, whereas serif typefaces come in  handy for lengthy or dense content areas.  Provide decent leading (rhymes with “heading”) or line spacing  Mobile screens are often held 10–12" away from the eye, which can make tracking  each line difficult. Increase the leading to avoid having the users lose their place.  Leave space on the right and left of each line; don’t crowd the screen  Most mobile frameworks give you full access to the screen, meaning that you nor-  mally need to provide some spacing between the right and left side of the screen’s  edge and your text—not much, typically about three to four character widths.  Generously utilize headings  Break the content up in the screen, using text-based headings to indicate to the  user what is to come. Using different typefaces, color, and emphasis in headings  can also help create a readable page.  Use short paragraphs  Like on the Web, keep paragraphs short, using no more than two to three sentences  per paragrap

17.  Graphics  Most common is the icon  Photos and images  Pay attention to landscape changes  Tools and SDK kits  Xcode – Apple  Android SDK  Windows mobile SDK  http://pelfusion.com/awesome-graphics/mobile- interface-development-ultimate-gui-toolbox-for-android- iphone-ipad-palm-pre/ http://pelfusion.com/awesome-graphics/mobile- interface-development-ultimate-gui-toolbox-for-android- iphone-ipad-palm-pre/