mobile prototyping
DESCRIPTION
Prototyping for Mobile Design Workshop - January, 2012. Bangalore PresentationTRANSCRIPT
![Page 1: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/1.jpg)
Special Thanks to our Sponsors
![Page 2: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/2.jpg)
![Page 3: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/3.jpg)
![Page 4: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/4.jpg)
![Page 5: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/5.jpg)
![Page 6: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/6.jpg)
Introduction to Mobile Design
Ideating
Need Analysis
3 ACTIVITES - DESIGNING FOR MOBILITY
IDENTIFYING NEED FOR A MOBILE APPLICATION
BRAINSTORMING AND IDEATING
PRESENTING CONCEPTS
![Page 7: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/7.jpg)
![Page 8: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/8.jpg)
Mobile Design Guidelines and patterns The Design Process
3 ACTIVITES - DESIGNING FOR MOBILITY
Card Sort
Story Boards
![Page 9: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/9.jpg)
![Page 10: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/10.jpg)
![Page 11: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/11.jpg)
![Page 12: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/12.jpg)
MOBILE IS GROWING LIKE CRAZY
![Page 13: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/13.jpg)
![Page 14: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/14.jpg)
“MOBILE PHONES
WILL OVERTAKE PC’S
AS THE MOST COMMON
WEB ACCESS DEVICES
BY 2013”
Gartner Research, 2010
![Page 15: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/15.jpg)
![Page 16: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/16.jpg)
Google: Our Mobile Planet, May 2012
![Page 17: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/17.jpg)
Google: Our Mobile Planet, May 2012
![Page 18: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/18.jpg)
Google: Our Mobile Planet, May 2012
![Page 19: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/19.jpg)
Google: Our Mobile Planet, May 2012
![Page 20: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/20.jpg)
![Page 21: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/21.jpg)
Google: Our Mobile Planet, May 2012
![Page 22: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/22.jpg)
MOBILE PRESENTS AN
OPPORTUNITY TO INVENT
NEW WAYS FOR USERS TO
INTERACT WITH
INFORMATION.
![Page 23: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/23.jpg)
NEXT BIG QUESTION WHAT TYPE OF MOBILE APP TO START WITH
![Page 24: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/24.jpg)
RESPONSIVE WEBSITE? WEB APP ? NATIVE APP? HYBRID APPS?
![Page 25: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/25.jpg)
![Page 26: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/26.jpg)
Thin Client Browser Apps
![Page 27: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/27.jpg)
PROS
![Page 28: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/28.jpg)
![Page 29: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/29.jpg)
![Page 30: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/30.jpg)
![Page 31: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/31.jpg)
![Page 32: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/32.jpg)
![Page 33: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/33.jpg)
CONS
![Page 34: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/34.jpg)
![Page 35: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/35.jpg)
![Page 36: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/36.jpg)
![Page 37: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/37.jpg)
![Page 38: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/38.jpg)
Rich Client Native Apps
![Page 39: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/39.jpg)
PROS
![Page 40: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/40.jpg)
![Page 41: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/41.jpg)
![Page 42: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/42.jpg)
![Page 43: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/43.jpg)
![Page 44: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/44.jpg)
![Page 45: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/45.jpg)
CONS
![Page 46: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/46.jpg)
![Page 47: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/47.jpg)
![Page 48: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/48.jpg)
MOBILE DESIGN
CHALLENGES
AND
GUIDELINES
![Page 49: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/49.jpg)
![Page 50: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/50.jpg)
![Page 51: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/51.jpg)
![Page 52: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/52.jpg)
![Page 53: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/53.jpg)
![Page 54: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/54.jpg)
![Page 55: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/55.jpg)
![Page 56: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/56.jpg)
![Page 57: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/57.jpg)
![Page 58: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/58.jpg)
![Page 59: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/59.jpg)
![Page 60: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/60.jpg)
![Page 61: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/61.jpg)
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?
![Page 62: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/62.jpg)
![Page 63: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/63.jpg)
![Page 64: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/64.jpg)
FACTORS THAT INFLUENCE PERFORMANCE.
![Page 65: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/65.jpg)
OPTIMIZE
YOUR
APP FOR
HIGH
PERFORMANCE
![Page 66: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/66.jpg)
![Page 67: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/67.jpg)
ONLY DESIGN WHAT
MAKES SENSE FOR A
MOBILE CONTEXT
![Page 68: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/68.jpg)
COMMON FEATURES THAT IMPACT THE
USER EXPERIENCE
![Page 69: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/69.jpg)
FEATURE WHAT IT DOES EXAMPLE APP OR FEATURE
Camera Takes photos & often video.
Too many to list!
GPS Provides the phone’s location.
Maps
Accelerometer Detects the phone’s orientation.
Determines when to switch from portrait to landscape view
Magnetometer Detects the phone’s direction.
Compass
Gyroscope Detects 3-axis angular acceleration around the X, Y and Z axes.
Gaming
Proximity sensor Detects proximity of user to phone.
Cue to dim screen when user speaking on phone.
Light sensor Determines how much light is available in the area surrounding the phone
Adjusts screen brightness to conserve battery.
![Page 70: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/70.jpg)
How can food joints use mobile
devices to improve their customer
experience?
![Page 71: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/71.jpg)
Identifying Needs – 30 mins
1. Divide into groups 2. Head to the nearest food joint 3. Observe mobile users in a mobile context 4. Develop a list of customer needs based on your
observations
![Page 72: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/72.jpg)
Ideating the Context – 30 mins
1. Brainstorm with the team 2. Create 2-3 unique concepts based on the needs
your team identified 3. Give your concept a name 4. Create user profiles
![Page 73: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/73.jpg)
Presenting Concepts
1. Each team would present a 10 minute introduction to their app which would include 1. Elevator Pitch: What your app does 2. User Profiles: Who your app is targeting and why 3. User Research Summary: What you learned in the user
research/observation study conducted
![Page 74: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/74.jpg)
![Page 75: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/75.jpg)
![Page 76: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/76.jpg)
MOBILE MINDSET
![Page 77: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/77.jpg)
Because of the differences between mobile and desktop, it’s imperative to get yourself into a mobile mindset before getting started.
![Page 78: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/78.jpg)
Be focused: More is not bePer. Edit your features ruthlessly. You are going to have to leave stuff out 1
![Page 79: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/79.jpg)
Be unique: Know what makes your app different and amplify it. There are lots of fish in the sea of mobile apps. If there’s nothing special about your app, why would anyone pick it?
2
![Page 80: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/80.jpg)
3 Be charming: Mobile devices are intensely personal. They are our constant companions. Apps that are friendly, reliable and fun are a delight to use, and people will become quite aPached to the experience.
![Page 81: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/81.jpg)
Be considerate: App developers too o]en focus on what would be fun to develop, their own mental model of the app or their personal business goals. These are good places to start, but you have to put yourself in your user’s shoes if you ever hope to create an engaging experience.
4
![Page 82: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/82.jpg)
MOBILE CONTEXTS
![Page 83: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/83.jpg)
IS THIS THE
CONTEXTS?
![Page 84: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/84.jpg)
It is certainly one context, but it’s not the only one.
![Page 85: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/85.jpg)
To begin to put ourselves in the shoes of our users, we need to consider three major mobile contexts
![Page 86: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/86.jpg)
There are a lot of people using their smartphones on the couch at home. In this context, immersive and deligh_ul experiences geared toward a longer usage session are a great fit. S`ll, interrup`ons are highly likely, so be sure your app can pick up where your user le] off. Examples: Facebook, TwiPer, Angry Birds, web browser.
![Page 87: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/87.jpg)
This is the 'running though the airport' scenario. The ability to accomplish micro-‐tasks quickly and reliably with one hand in a hec`c environment is cri`cal. Remember that the user will have tunnel vision in this context, so huge targets and bold design are important. Examples: TripIt, email, calendar, banking.
![Page 88: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/88.jpg)
Users who are in transit, in unfamiliar surroundings, or in familiar surroundings but interested in something unknown around fall into the lost category. In this context, sketchy connec`vity and baPery life are big concerns, so you should offer some level of offline support and be sparing with your use of geoloca`on and other baPery hogs. Typical examples: Maps, Yelp, Foursquare.
![Page 89: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/89.jpg)
COMMUNICATIONS
![Page 90: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/90.jpg)
Provide instant feedback for every interac`on. If you don’t, the user will wonder if the app has frozen up, or if they missed the target they were trying to hit. The feedback could be tac`le (like the Android ‘thump’ vibra`on), or visual (highligh`ng a tapped buPon, for instance).
![Page 91: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/91.jpg)
Modal alerts are extremely pushy and intrusive to the user’s flow, so you should only use them when something is seriously wrong. Even then, try to mi`gate the intensity by keeping language reassuring and friendly. Remember not to use modal alerts for 'FYI' type informa`on.
![Page 92: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/92.jpg)
When you have to ask a user to confirm an ac`on, it’s acceptable to display a modal confirma`on dialog (such as 'Are you sure you want to delete this dra]?'). Confirma`ons are less intrusive than alerts because they are in response to a user ac`on and therefore in context and perhaps even expected.
![Page 93: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/93.jpg)
GLOBAL GUIDELINES
![Page 94: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/94.jpg)
Different apps call for different approaches, designs and techniques. The inherent nature of a pocket-‐sized touchscreen device suggests several global guidelines; ie, the stuff that always maPers.
![Page 95: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/95.jpg)
Responsiveness is absolutely cri`cal. If your user does something, your app needs to acknowledge the interac`on instantly. It’s OK if certain opera`ons take `me. Just make sure you let the user know you’re working on it.
![Page 96: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/96.jpg)
Polish is extremely valuable. Because of the 'constant companion' nature of our rela`onship to smartphones, paying a lot of aPen`on to gekng the liPle details perfect will be no`ced and appreciated.
![Page 97: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/97.jpg)
With the advent of touchscreen interfaces, everyone is always talking about 'finger this' and 'finger that'. In reality, the thumb is what we need to design for.
![Page 98: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/98.jpg)
The revolu`on of touch interfaces is that they enable us to interact directly with our content. This removes abstrac`ons (such as mouse and trackpad) and is more in line with how our brains are wired. Leverage the intui`ve power of touch UI by minimising interface chrome (buPons, tab bars, checkboxes, sliders and so on) wherever possible and pukng your content front and centre.
![Page 99: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/99.jpg)
Avoid scrolling. Having a non-‐scrolling screen has a more solid and dependable 'feel' than a scrolling view because it’s more predictable. Of course, certain screens have to scroll, but it’s good to avoid it where you can.
![Page 100: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/100.jpg)
NAVIGATION MODEL
![Page 101: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/101.jpg)
There are plenty of novel naviga`on models for mobile apps but if you're going to use one of common naviga`on models, be sure to pick the one that makes the most sense for your app.
![Page 102: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/102.jpg)
None: Single screen u`lity apps (eg Weather app on iPhone)
![Page 103: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/103.jpg)
Tab bar: Three to six dis`nct content areas (eg TwiPer for iPhone)
![Page 104: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/104.jpg)
Drill down: List and detail content hierarchy (eg Sekngs app on iPhone)
![Page 105: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/105.jpg)
USER INPUT
![Page 106: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/106.jpg)
Typing s`nks even on the best devices, so you should do what you can to make it easier for your users.
![Page 107: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/107.jpg)
If your app invites a lot of typing, you should ensure you support landscape orienta`on.
![Page 108: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/108.jpg)
There are many keyboard varia`ons on popular smartphones (text, number, email, URL and so on). Consider each of your input fields and be sure to display the keyboard that will be most useful for the data entry being done.
![Page 109: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/109.jpg)
GESTURES
![Page 110: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/110.jpg)
One of the most iconic aspects of modern touch interfaces is that they support gesture-‐based user interac`on.
![Page 111: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/111.jpg)
Gestures are invisible, so discovery is an issue. You have to decide how to reveal their existence to the user.
![Page 112: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/112.jpg)
Mul`-‐touch gestures require two-‐handed opera`on. EXAMPLE in the na`ve Maps app on iOS which uses a pinch open gesture to zoom out. When I’m traveling in a foreign city with a coffee in one hand and my phone in the other, this is an annoying limita`on. Android addresses this issue by including zoom in/out buPons overlaid on the map
![Page 113: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/113.jpg)
![Page 114: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/114.jpg)
![Page 115: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/115.jpg)
![Page 116: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/116.jpg)
Understand and iden`fy the core
problems first
Discover
![Page 117: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/117.jpg)
HOW DO WE
DEFINE
PROBLEMS?
![Page 118: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/118.jpg)
CULTURAL AND SOCIAL
![Page 119: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/119.jpg)
CHALLENGES
AND
NEEDS
![Page 120: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/120.jpg)
DEMOGRAPHICS AND ABILITIES
![Page 121: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/121.jpg)
ENVIRONMENTAL AND CONTEXTUAL
![Page 122: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/122.jpg)
HOW DO WE
IDENTIFY
PROBLEMS?
![Page 123: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/123.jpg)
STAKEHOLDER INTERVIEWS
![Page 124: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/124.jpg)
KICKOFF MEETINGS
![Page 125: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/125.jpg)
CONTENT AUDIT/INVENTORY
![Page 126: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/126.jpg)
FOCUS GROUP
![Page 127: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/127.jpg)
CONTEXTUAL INQUIRIES
![Page 128: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/128.jpg)
PERSONAS
![Page 129: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/129.jpg)
Iden`fy possible solu`ons and plan execu`on
PLAN
![Page 130: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/130.jpg)
Create designs that resolve the core problems
Design
![Page 131: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/131.jpg)
HOW DO WE
RESOLVE
THE
PROBLEMS?
![Page 132: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/132.jpg)
SCENARIOS
![Page 133: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/133.jpg)
CARD SORTING
![Page 134: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/134.jpg)
APP MAP OR FLOWCHART
![Page 135: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/135.jpg)
WIREFRAME
![Page 136: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/136.jpg)
PROTOTYPE
![Page 137: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/137.jpg)
USABILITY TESTING
![Page 138: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/138.jpg)
Develop func`onal code based on the designs
BUILD
![Page 139: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/139.jpg)
Review, test, and analyze effec`veness of the design
EVALUATE
![Page 140: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/140.jpg)
![Page 141: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/141.jpg)
RECAP
How can food joints use mobile
devices to improve their customer
experience?
![Page 142: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/142.jpg)
Information Gathering– 45 mins
1. Note down a list of possible features for your app concept
2. Prepare the cards 3. Execute card sorting 4. Analyze the results
INFORMATION GATHERING
![Page 143: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/143.jpg)
15 MINUTES BREAK
![Page 144: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/144.jpg)
Storyboarding – 60 mins
STORYBOARDING
1. Based on your previous activities, Identify the central
idea(s) you are trying to communicate.
2. Storyboard one scenario using the templates provided.
3. Remember to identify the key issues the character faces
and rough out the complete story before filling in details.
4. Present a small demo of your storyboard concept
![Page 145: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/145.jpg)
![Page 146: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/146.jpg)
![Page 147: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/147.jpg)
![Page 148: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/148.jpg)
![Page 149: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/149.jpg)
![Page 150: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/150.jpg)
![Page 151: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/151.jpg)
MOBILE PROTOTYPING ESSENTIALS
Ideating
Need Analysis
2 ACTIVITES - DESIGNING FOR MOBILITY
QUIZ
DESIGNING AND TESTING PAPER PROTOTYPES
![Page 152: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/152.jpg)
![Page 153: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/153.jpg)
MOBILE PROTOTYPING ESSENTIALS
Ideating
Need Analysis
3 ACTIVITES - DESIGNING FOR MOBILITY
MOBILE PROTOTYPE USING PRESENTATION SOFTWARE
IN DEVICE INTERACTIVE PROTOTYPES
MOBILE BROWSER PROTOTYPE
![Page 154: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/154.jpg)
Mobile Prototyping Tools and Methods
![Page 155: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/155.jpg)
What is
Prototyping?
![Page 156: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/156.jpg)
THE WORD PROTOTYPE comes from the Greek pratos, which means "first," and typos. which means "impression.”
FIRST
IMPRESSION
![Page 157: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/157.jpg)
Why
Prototyping?
![Page 158: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/158.jpg)
Prototypes can help you
solve design problems,
evaluate designs and
communicate design
ideas
![Page 159: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/159.jpg)
Prototypes can be an efficient way to
work through design problems before
gekng deep into coding.
SOLVE DESIGN PROBLEMS
![Page 160: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/160.jpg)
They can help address everything from
higher-‐level conceptual issues to lower-‐
level interac`ons.
SOLVE DESIGN PROBLEMS
![Page 161: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/161.jpg)
Prototypes are often used to evaluate
design ideas, concepts, flows, and
Interactions before investing
development time.
EVALUATE DESIGN IDEAS
![Page 162: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/162.jpg)
Prototypes make your designs bePer
IN A NUTSHELL
Prototypes facilitate communica`on
Prototypes enable user input and usability assessment
Prototypes help assess technical feasibility
1
2
3
4
![Page 163: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/163.jpg)
THE PROTOTYPING
SPECTRUM
![Page 164: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/164.jpg)
![Page 165: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/165.jpg)
LOW FIDELITY
![Page 166: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/166.jpg)
MEDIUM FIDELITY
![Page 167: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/167.jpg)
HIGH FIDELITY
![Page 168: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/168.jpg)
THE PROTOTYPING
GENRES
![Page 169: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/169.jpg)
![Page 170: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/170.jpg)
TACTICAL PROTOTYPING
Sketching
Paper Prototyping
Interac`ve On-‐Device Prototyping
1
2
3
![Page 171: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/171.jpg)
Interac`ve On-‐Device Prototyping includes:
In-‐screen mobile prototype
Mobile browser prototype
Mobile prototype using presenta`on so]ware
Pla_orm specific prototype
1
2
3
44
![Page 172: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/172.jpg)
Best suited for design explorations where:
You are working on a “focused” mobile project.
1
2
3
Target mobile hardware and software scope is known.
The design space is relatively known.
![Page 173: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/173.jpg)
Storyboarding
Bodystorming
Speed da`ng prototypes
Concept videos
EXPERIENTIAL PROTOTYPING
1
2
3
4
![Page 174: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/174.jpg)
Best suited for design explorations where:
You are working on a “broader” mobile project.
1
2
3
Target mobile hardware and software scope is unknown (perhaps being created).
The design space is relatively unchartered.
![Page 175: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/175.jpg)
TACTICAL PROTOTYPING
![Page 176: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/176.jpg)
TACTICAL PROTOTYPING
Sketching
Paper Prototyping
Interac`ve On-‐Device Prototyping
1
2
3
![Page 177: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/177.jpg)
![Page 178: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/178.jpg)
Sketching is rapid, freehand drawing that we do with no inten`on of its becoming a finished product.
![Page 179: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/179.jpg)
Sketching is a founda`on upon which we can overlay our actual design work.
![Page 180: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/180.jpg)
SKETCHING BENEFITS
![Page 181: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/181.jpg)
Quick: A sketch is quick to make, or at least gives that impression.
![Page 182: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/182.jpg)
Timely: A sketch can be provided when needed.
![Page 183: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/183.jpg)
Inexpensive: A sketch is cheap. Cost must not inhibit the ability to explore a concept, especially early in the design process.
![Page 184: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/184.jpg)
WHEN DO WE USE THESE SKETCH PROTOTYPES?
![Page 185: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/185.jpg)
DESIGNING INTERFACES • Visualizing concepts • Exploring alterna`ves • Resolving feature details • Developing interac`on scenarios
![Page 186: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/186.jpg)
TESTING INTERFACES • Intelligibility -‐ can you read or interpret this? • Trackability -‐ can you follow this? • Fumble factor -‐ can you make this work?
![Page 187: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/187.jpg)
PRESENTING INTERFACE IDEAS • To UI designers -‐ looking at all parts of the interface • To programmers -‐ implemen`ng the interface • To marke`ng and management -‐ determining applica`on features • To users -‐ gekng early feedback
![Page 188: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/188.jpg)
![Page 189: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/189.jpg)
TACTICAL PROTOTYPING
Sketching
Paper Prototyping
Interac`ve On-‐Device Prototyping
1
2
3
![Page 190: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/190.jpg)
PAPER PROTOTYPE?
![Page 191: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/191.jpg)
Paper prototyping is a key component of the DESIGN process and is a popular method among designers.
![Page 192: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/192.jpg)
Paper prototypes are essen`ally paper models of your smartphone apps
![Page 193: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/193.jpg)
PAPER PROTOTYPE BENEFITS
![Page 194: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/194.jpg)
Quick itera+ons Paper prototypes enable you to rapidly iterate and experiment with many ideas. The modest `me investment makes it easier to throw away less promising direc`ons.
![Page 195: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/195.jpg)
Inexpensive Ordinary office supplies can be used for paper prototypes: Sharpies, Pos`ts, printer paper. Most important, these up-‐front paper itera`ons can reduce costly changes on the development end.
![Page 196: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/196.jpg)
Collabora+ve Paper prototypes do not require any technical skills; thus everyone (users, too!) can par`cipate.
![Page 197: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/197.jpg)
Easy to edit You or your users can edit paper prototypes on the & y (e.g., change labels, add screens, add buPons)
![Page 198: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/198.jpg)
PAPER PROTOTYPE CHALLENGES
Paper prototypes are less suitable for
refining low-‐level interac`ons such as
transi`ons, scrolling, and swiping.
![Page 199: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/199.jpg)
PAPER PROTOTYPE CHALLENGES
Less useful for certain classes of apps,
such as musical instruments, videos, and
games.
![Page 200: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/200.jpg)
User experience issues o]en explored with paper prototypes include
![Page 201: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/201.jpg)
App concept -‐ Do users understand your app’s central concept? 1
2 Workflows -‐ Is the overall naviga`on clear? Are there too many steps to complete tasks?
3 Informa`on organiza`on -‐ Does the current organiza`on match user's expecta`ons?
4 Terminology -‐ Are the labels on tabs, screens, and buPons clear?
![Page 202: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/202.jpg)
PAPER PROTOTYPING HOW TO?
![Page 203: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/203.jpg)
PAPER, PEN, CARDBOARD, REMOVABLE TAPE, GLUE, CORRECTION FLUID, AND SCISSORS.
![Page 204: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/204.jpg)
At some point your designs will have to match the PHONE screen dimensions—320 × 480 pixels (640 × 960 for iPhone 4)—but paper prototypes can be less exact. Using a larger form factor will make it easier for others to interact with the design (e.g., rearrange the layout and write in text Fields)
![Page 205: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/205.jpg)
Your prototype will include a background, the screens, and the user interface controls.
![Page 206: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/206.jpg)
RECAP
How can food joints use mobile
devices to improve their customer
experience?
![Page 207: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/207.jpg)
Create Paper Prototype – 60 mins
PAPER PROTOTYPE
1. Create a paper prototype that illustrates 3 major tasks for
your interface / interaction design, likely (but not
necessarily) based on your storyboards.
2. The prototype should be complete enough to "run" a new
user through each task.
![Page 208: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/208.jpg)
Test Paper Prototype – 60 mins
PAPER PROTOTYPE
1. Prepare for testing your paper prototype
2. Identify a participant as user, provide him a test script
3. Identify and make notes of your finding
![Page 209: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/209.jpg)
LUNCH
![Page 210: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/210.jpg)
TACTICAL PROTOTYPING
Sketching
Paper Prototyping
Interac`ve On-‐Device Prototyping
1
2
3
![Page 211: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/211.jpg)
Interac`ve On-‐Device Prototyping includes:
In-‐screen mobile prototype
Mobile browser prototype
Mobile prototype using presenta`on so]ware
Pla_orm specific prototype
1
2
3
44
![Page 212: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/212.jpg)
Pros and Cons of Common On-‐Device Prototyping Tools
Level of Complexity/Difficulty to Create
Level of Interac+vity
Level of Programming Required
In-‐Screen Prototype Low Low None
Browser Prototype Medium Low Low
Keynote/Powerpoint Prototype
Medium Medium None
Pla_orm-‐Specific Prototype (example: XCode for the Apple pla_orm)
High High High
![Page 213: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/213.jpg)
Given the limita`ons of sta`c image prototypes,
Interac`ve On-‐Device Prototyping are interac`ve
prototyping techniques.
Interac`ve On-‐Device Prototyping
![Page 214: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/214.jpg)
You can explore almost any aspect of the user experience. In contrast to sta`c image prototypes, you can provide forms, transi`ons, and scrolling content.
ISSUES TO EXPLORE
![Page 215: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/215.jpg)
Although interac`ve prototypes are powerful, there are s`ll some aspects that differen`ate them from the “real” experience. In par`cular, you will s`ll likely need to fake the current loca`on informa`on, live data feeds, and the handling of interrup`ons (what happens when the connec`on is lost or disrupted?).
CHALLENGES
![Page 216: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/216.jpg)
In-‐screen mobile prototype
The idea behind this technique is simple: place the paper prototype of the mobile applica`on inside the mobile device.
![Page 217: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/217.jpg)
In-‐screen mobile prototype
This prototyping technique is prac`cal since it leverages prototypes that are likely to have been previously made for tes`ng.
![Page 218: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/218.jpg)
In-‐screen mobile prototype
If a designer has sketched a number of paper prototypes to conduct a usability test or a heuris`c evalua`on, these can be easily turned into paper-‐in-‐screen prototypes.
![Page 219: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/219.jpg)
In-‐screen Mobile Prototype How to
![Page 220: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/220.jpg)
![Page 221: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/221.jpg)
![Page 222: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/222.jpg)
![Page 223: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/223.jpg)
![Page 224: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/224.jpg)
![Page 225: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/225.jpg)
![Page 226: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/226.jpg)
In-Screen Prototype – 60 mins
IN-‐SCREEN PROTOTYPE
1. Identify one of the scenarios/flows from your previous
exercise
2. Create a quick paper version of the prototype
3. Take pictures from your camera, upload it, optimize it and
test it
![Page 227: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/227.jpg)
10 MINS BREAK
![Page 228: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/228.jpg)
A browser prototype is simply a prototype that is
rendered by using your mobile device’s browser,
which is using HTML and other browser-‐based
programming such as JavaScript.
MOBILE BROWSER PROTOTYPE
![Page 229: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/229.jpg)
For those less familiar with extensive markup,
you can easily upload a series of linked image
maps of screen layouts and view them through
your phone’s browser.
MOBILE BROWSER PROTOTYPE
1
![Page 230: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/230.jpg)
Mobile Browser Prototypes are medium fidelity, very
interac`ve and hence can be tested with full
interac`ons
MOBILE BROWSER PROTOTYPE BENEFITS
![Page 231: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/231.jpg)
Mobile Browser Prototype How to
![Page 232: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/232.jpg)
![Page 233: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/233.jpg)
![Page 234: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/234.jpg)
![Page 235: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/235.jpg)
Mobile Browser Prototype – 30 mins
MOBILE BROWSER PROTOTYPE
1. Identify one of the scenarios/flows from your previous
exercises
2. Create a click through version of your App
3. Test it in mobile browser or emulators
![Page 236: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/236.jpg)
Crea`ng prototypes using presenta`on so]ware such
as Apple Keynote or Microso] PowerPoint is an
efficient way to prototype interac`vity and transi`ons
on a mobile device.
MOBILE PROTOTYPE USING PRESENTATION SOFTWARE
![Page 237: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/237.jpg)
You can easily download pla_orm components from
the Web, build your prototype using the presenta`on
so]ware, fine-‐tune the interac`ons and transi`ons
included in the so]ware, and download the file to
your mobile device.
MOBILE PROTOTYPE USING PRESENTATION SOFTWARE
![Page 238: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/238.jpg)
While designers use various types of tools to
document their wireframe ideas, presenta`on
so]ware is emerging as a favorite tool in the mobile
UX realm.
MOBILE PROTOTYPE USING PRESENTATION SOFTWARE
![Page 239: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/239.jpg)
In addi`on to specifying the placement of design
elements on a screen, presenta`on so]ware
enables designers to turn their work into low-‐
fidelity on-‐device prototypes.
MOBILE PROTOTYPE USING PRESENTATION SOFTWARE -‐ BENEFITS
![Page 240: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/240.jpg)
Instead of flat, sta`c documents, presenta`on
so]ware offers designers the ability to
experiment with transi`ons and interac`vity.
MOBILE PROTOTYPE USING PRESENTATION SOFTWARE -‐ BENEFITS
![Page 241: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/241.jpg)
MOBILE PROTOTYPE USING PRESENTATION SOFTWARE -‐ HOW TO
![Page 242: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/242.jpg)
![Page 243: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/243.jpg)
![Page 244: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/244.jpg)
![Page 245: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/245.jpg)
![Page 246: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/246.jpg)
Mobile Prototyping – 30 mins
MOBILE PROTOTYPING
1. Identify one of the scenarios/flows from your previous
exercises
2. Create a click through prototype using power point or
keynote
3. Upload your design file into mobile device
4. Test it on device
![Page 247: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/247.jpg)
BREAK
![Page 248: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/248.jpg)
PLATFORM SPECIFIC PROTOTYPING
![Page 249: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/249.jpg)
PLATFORM SPECIFIC PROTOTYPING
Is a technique where pla_orm specific prototypes are created using na`ve SDK’s
![Page 250: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/250.jpg)
PLATFORM SPECIFIC PROTOTYPING – CHALLENGES
Requires pla_orm specialized Programming skills
![Page 251: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/251.jpg)
PLATFORM SPECIFIC PROTOTYPING – CHALLENGES
Development `me and effort is more
![Page 252: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/252.jpg)
PLATFORM SPECIFIC PROTOTYPING – BENEFITS
Completely interac`ve and can leverage device’s na`ve capabili`es
![Page 253: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/253.jpg)
EXPERIENTIAL PROTOTYPING
![Page 254: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/254.jpg)
Storyboarding
Bodystorming
Speed da`ng prototypes
Concept videos
EXPERIENTIAL PROTOTYPING
1
2
3
4
![Page 255: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/255.jpg)
STORYBOARDING
![Page 256: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/256.jpg)
![Page 257: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/257.jpg)
is a powerful UX technique borrowed from the filmmaking process
![Page 258: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/258.jpg)
![Page 259: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/259.jpg)
Storyboarding helps us to understand exis`ng scenarios, a well as test hypotheses for poten`al scenarios.
![Page 260: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/260.jpg)
STORYBOARDING HOW TO?
![Page 261: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/261.jpg)
Storyboarding
Bodystorming
Speed da`ng prototypes
Concept videos
EXPERIENTIAL PROTOTYPING
1
2
3
4
![Page 262: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/262.jpg)
BODYSTORMING
![Page 263: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/263.jpg)
Body storming is a technique that helps capture and harness these messy yet essential aspects of human behavior and account for them in the mobile design process.
![Page 264: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/264.jpg)
Body storming involves acting out possible scenarios or use cases with actors and props.
![Page 265: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/265.jpg)
BODYSTORMING HOW TO?
![Page 266: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/266.jpg)
BODYSTORMING HOW TO?
![Page 267: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/267.jpg)
Bodystorming will help you capture the emotional tenor of mobile interactions
![Page 268: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/268.jpg)
Storyboarding
Bodystorming
Speed da`ng prototypes
Concept videos
EXPERIENTIAL PROTOTYPING
1
2
3
4
![Page 269: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/269.jpg)
SPEED DATING PROTOTYPES
![Page 270: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/270.jpg)
Speed Da`ng Prototypes are especially well-‐suited for gathering user impressions of a new-‐to-‐the-‐world experience
![Page 271: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/271.jpg)
SPEED DATING PROTOTYPE HOW TO?
![Page 272: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/272.jpg)
![Page 273: Mobile Prototyping](https://reader034.vdocuments.net/reader034/viewer/2022051412/54c7fbe14a79597a558b4579/html5/thumbnails/273.jpg)