CS 235: User Interface Design November 3 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak 2 Unofficial Field Trip  Computer History Museum in Mt. View  Saturday, November 8, 11:30 – closing time Special free admission. Do a self-guided tour of the new Revolution exhibit. See a life-size working model of Charles Babbage’s Difference Engine in operation, a hand-cranked mechanical computer designed in the early 1800s. Experience a fully restored IBM 1401 mainframe computer from the early 1960s in operation.  General info:  My summer seminar:  Restoration: thelen.org/1401Project/1401RestorationPage.htmlhttp://ed- thelen.org/1401Project/1401RestorationPage.html

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak 3 Unofficial Field Trip  The new Revolution exhibit is now open! Walk through a timeline of the First 2000 Years of Computing History. Historic computer systems, data processing equipment, and other artifacts. Small theater presentations. Atanasoff-Berry Computer Hollerith Census Machine

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak 4 Unofficial Field Trip  Babbage Difference Engine, fully operational. Hand-cranked mechanical computer. Computed polynomial functions. Designed by Charles Babbage in the early to mid 1800s.  Arguably the world’s first computer scientist, lived He wasn’t able to build it because he lost his funding.  Live demo at 1:00  His plans survived and this working model was built. Includes a working printer!

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak 5 Unofficial Field Trip  IBM 1401 computer, fully restored and operational A small transistor-based mainframe computer. Extremely popular with small businesses in the late 1950s through the mid 1960s  Maximum of 16K bytes of memory.  800 card/minute card reader (wire brushes).  600 line/minute line printer (impact).  6 magnetic tape drives, no disk drives.

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Mobile-Centric Thinking  Unique characteristics of a mobile user interface: Small screen size (smart phone) Touch screen Gestures  iOS, Android, and Windows Phone have distinct design conventions. Recommendation: Spend at least 6 weeks using each OS before starting a design. 6

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Designing with Small Screens  The screen is a window onto larger content that can’t all fit at once. 7 Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Navigation Types  Persistent Simple on-screen menu structures. Used for primary navigation from one major category to another within an app.  Transient Must be explicitly revealed with a tap or gesture. Conserve space with a small screen size. 8

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: Springboard  Combine the grid and menu page design patterns. 9 iOSAndroidWindows Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: Springboard, cont’d  Tiled menu page (Windows Phone): 10 CalendarProNBC NewsEvernote Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: Cards  Card deck metaphor Stacking, shuffling, discarding, flipping, etc. 11 Palm webOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: Cards, cont’d  Cards can be used for primary navigation. 12 Google Now for Android Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: Cards, cont’d  Swipe to move or remove cards. 13 Jelly for iOS Potluck for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: List Menu  Similar to a springboard, but can be hierarchical. 14 Kayak for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: List Menu, cont’d 15 Day One for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: List Menu, cont’d  Android: The “up” button is the “back” button. Conveys hierarchy. 16 eBay for Android Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: Dashboard  A quick glance gives a snapshot of the most relevant information. Similar to a springboard and a list menu. 17 Mint for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: Gallery  Display live visual content. News stories, recipes, photos, etc. Arranged in a grid, carousel, or slideshow.  Non-hierarchical  Frequently updated. 18

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: Gallery, cont’d 19 Recipeas for iOS Square Wallet for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: Gallery, cont’d  Which is easier to read? 20 LinkedIn Pulse for Android BBC News for Android Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: iOS Tab Menu  Tab bar to navigate “flat apps”. Limited to five menu items. “More” option as the fifth item. “Call to action”: A highlighted menu item.  Tool bar Presents tools or actions for a specific screen. 21 Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: iOS Tab Menu, cont’d 22 Amazon for iOS Walmart for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: iOS Tab Menu, cont’d  Calls to action 23 Instagram for iOS RunKeeper for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: Android Tab Menu  Fixed tabs for primary navigation 24 Quora for Android Path for Android Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: Windows Tab Menu  App tabs pivot control 25 Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: Configurable Tabs  Users can add, delete, and rearrange tabs. 26 Frequency for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: Skeuomorphism  Skeuomorphic: An interface designed to appear like its real-world counterpart. 27 Cross DJ for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Persistent Navigation: Skeuomorphism, cont’d  Emulate a real-world object. 28 Hipstamatic for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak 29 Persistent Navigation: Skeuomorphism, cont’d Awesome Note for iOS Newstand for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak 30 Persistent Navigation: Skeuomorphism, cont’d FlightBoard for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Transient Navigation  Navigation menus remain hidden until the user reveals them.  Menus disappear after the user makes a selection. 31

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Transient Navigation: Overlay Side Drawer  A swipe or tap reveals a drawer that covers the original screen content. 32 RetailMeNot for Android Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Transient Navigation: Inlay Side Drawer  A swipe or tap opens a drawer that pushes the original content partially off-screen. 33 Path for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Transient Navigation: Dual Side Drawers 34 Facebook beta for Windows Phone Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Transient Navigation: Toggle Menu  Tap to reveal the menu. 35 Walmart for Android Home Depot for Windows Phone Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Transient Navigation: Pie Menu  Probably should be avoided. 36 Paranoid Android OS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Transient Navigation: Page Swiping  Use page indicators to indicate navigation. 37 Audible for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Transient Navigation: Page Swiping, cont’d  Android page indicators 38 Google Maps for Android Ark Mail for Android Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Transient Navigation: Android Scrolling Tabs  Useful to display multiple views in a module. Often an affordance to swipe horizontally. 39 Google PlaySongzaTuneIn Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Transient Navigation: Accordion  See more information on the same screen. 40 Elevator for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Transient Navigation: Accordion, cont’d 41 Flava for iOS Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014

Computer Science Dept. Fall 2014: November 3 CS 235: User Interface Design © R. Mak Transient Navigation: Accordion, cont’d 42 Play Store for Android Mobile Design Pattern Gallery, 2 nd ed. by Theresa Neil O’Reilly, 2014