• Save
Session 9-10 - UI/UX design for iOS 7 application
Upcoming SlideShare
Loading in...5
×
 

Session 9-10 - UI/UX design for iOS 7 application

on

  • 1,650 views

 

Statistics

Views

Total Views
1,650
Views on SlideShare
1,583
Embed Views
67

Actions

Likes
6
Downloads
0
Comments
0

5 Embeds 67

http://uiuxvn.tumblr.com 33
http://assets.txmblr.com 24
http://cmos00.tistory.com 5
https://twitter.com 4
http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Session 9-10 - UI/UX design for iOS 7 application Session 9-10 - UI/UX design for iOS 7 application Presentation Transcript

  • iOS Application Development
  • UI/UX Design for iOS 7 Application These are confidential sessions - please refrain from streaming, blogging, or taking pictures Session 9 - 10 Vu Tran Lam IAD-2013
  • What is UX?
  • What is UX?
  • What is UX? This is not a user experience.
  • What is UX? This is a user experience.
  • What is UX? Product
  • What is UX? UI
  • What is UX? UX
  • Concept of UX Design • User Experience (UX) is a person's perceptions and responses that result from the use or anticipated use of a product, system or service. • User experience encompasses all aspects of the end-user's interaction with the company, its services, and its products. • UX includes all the users' emotions, beliefs, perceptions, physical and psychological responses, behaviors and accomplishments that occur before, during and after use. • User experience design fully encompasses traditional Human- Computer Interaction (HCI) design and extends it by addressing all aspects of a product or service as perceived by users.
  • • Users as the centre of UX design • Understanding the UX design process • Getting to know about the UX toolkit Getting started with UX Design
  • UX Designer Storyboard Discovery User Research Information Architecture Wire Framing Interaction Design Visual Design & Style Guide Prototyping Logo & Website Design GUI Spec Conceptual Model
  • Design Thinking Design Thinking is about creating great experiences for our users.
  • Design Thinking Research Ideate Prototype TestDefine Empathize with the audience you are designing for Brainstorm possible designs Build a representation of your ideas Define the goal and requirements Test your ideas 
 for feedback
  • Design Thinking Research Define Prototype Ideate Test Desirability (Human) Viability (Organization) Feasibility (Technology) Innovation
  • Lean Startup Learn Measure Build
  • Lean Startup Learn Measure Build Data ProductIdeas
  • Agile Feedback Develop & Design User Stories
  • Agile
  • Lean UX • The role of UX designer is changing • Less about the beautiful pictures, more about facilitation and collaboration • Manages and plans team interaction in the design process Waterfall UX Agile UX WorkEffort Project Time WorkEffort Make Check Think
  • Lean UX Design Strategy Business Needs Get internal focus on what matters and prioritize business goals Audience Needs Prioritize your audiences, define them and the scenarios in which they would use your product Ideation Brainstorm ways to satisfy business and audience needs Sketching Flesh out best ideas and get stakeholders on board with conceptual model
  • • (First) product version to test our ideas as quickly and cheaply as possible.! • An MVP has just those features that allow the product to be deployed and validated, and no more. • “The minimum viable product is that version of a new product (or feature) which allows a team to collect the maximum amount of validated learning about customers with the least effort.”! • Is not a minimal product, it’s a strategy and process directed towards making and selling a product to customers. • The MVP works together with a build-measure-learn cycle: developing software, gathering customer feedback, and learning from it. Minimal Viable Product (MVP)
  • Minimal Viable Product Process Conceptual inquiry (CI) Personas Empathy map! Stackeholder map! User experience map Heuristic evaluation
 User Research & Analysis 1 Inception deck Storyboard! Sketchboard! Elevator pitch! Flow diagram! Stories Story map “Agile schedule” Defining & Scoping 2 Sketches Wireframes! Paper prototype! Mockups Function prototype Just-in-time design Prototypin g & 3 Usability Testing Paper prototype usability testing Pair testing Controlled experiments Heuristic evaluation Cognitive walkthrough 4
  • Lean UX Design Process Prototype! Photoshop Illustrator Sketch HTML + CSS + JS Xcode Storyboard Define! Online Research Conceptual Inquiry Personas Empathy Map Storyboard Brainstorming Summarize! Discussion Documentation / Wiki Decision of Next Step Road Map Test Externally! Customer Meeting A-B Testing Google Analytics Survey Feedback System Validate Internally! Whiteboard + Pinboard Daily Scrum Internal Survey Meeting Minutes / Wiki Sketch! Sketchboard Whiteboard Sketchbook OmniGraffle / Balsamiq UXPin Illustrator Powerpoint Iterate! Plan and move to next cycle 1 2 3 4 5 6 7 Usability Testing Sketch! Sketch Your Concepts Screen Wireframing Major Interaction Prototype! Visual Design Icon + Style Guide Screen Mockup Paper Prototype HTML Prototype iOS Prototype Validate Internally! Get quick and frequent feedback from executive and team members Test Externally! Meet with customers, find niche group of target users Summarize! Validate and learn from user behavior Iterate! Plan and move to next cycle Define! Discovery and research to define user scenario and conceptual model
  • Case Study: WeConnect Prototype! Photoshop Illustrator HTML + CSS + JS Pop Xcode Storyboard Define! Online Research Conceptual Inquiry Personas Empathy Map Storyboard Brainstorming Summarize! Discussion Documentation / Wiki Decision of Next Step Road Map Test Externally! Customer Meeting A-B Testing Google Analytics Survey Feedback System Validate Internally! Whiteboard + Pinboard Daily Scrum Internal Survey Meeting Minutes / Wiki Wireframe! Sketchboard Whiteboard Sketchbook OmniGraffle / Balsamiq UXPin Sketch Illustrator Powerpoint Iterate! Plan and move to next cycle 1 2 3 4 5 6 7
  • Case Study: WeConnect
  • Case Study: WeConnect
  • Case Study: WeConnect
  • Key Points Ideal! ! Objectives Realistic! ! Objectives Solution! ! Objectives Blank Page Blank Page Blank Page User Feedback is the Key
  • Key Points • Simple and clear • Less features • Less screen or pages • Less button • Less on “wow” • More details • More interactions • More innovations • More on customer feedback
  • Key Points Desirability (Human) Viability (Organization) Feasibility (Technology) Innovation Balancing business & user needs
  • Key Points Iteration improves the product Researc h Ideate Prototyp e TestDefine Feedba ck Develo p & User Stories Learn Measure Build
  • • iPhone application overview • iPhone device overview iPhone Application and Device Overview
  • • Utility applications • Productivity applications • Immersive applications iPhone Application Overview
  • • Utility apps enable users to quickly access a specific type of information or per- form a narrowly defined task. • Apps well suited to this style include weather, stocks, traffic reports, calculator, compass,... • Characteristics of most Utility apps include • Minimal setup • Simple flows and layouts • Standard user interface elements Utility Applications
  • Utility Applications Tour CompassWeather Calculator
  • • Productivity-style apps are more full-featured than Utility apps and encompass everything from social networking to mobile banking. • The time spent with these apps varies based on the context and task; for example, a user may spend a few seconds checking for new email messages but several minutes reading the messages. • Productivity apps are highly diverse, but most can be identified by the following characteristics: Hierarchical structure Accelerators and shortcuts Productivity Applications
  • Productivity Applications Tour Message RemindersClock
  • • Immersive applications are used to play games, view media, and perform specialized tasks. • Users typically turn to games and media apps when they have some downtime, which can last several minutes or several hours. • Immersive apps are highly diverse, but most can be identified by the following characteristics: Focus on the content Customized user experience Immersive Applications
  • Immersive Applications Tour Music Game Center iBooks
  • • Multi-touch display • 8 megapixels iSight camera • Siri • Location and compass information • Microphone and speaker iPhone Devices Overview
  • iPhone Devices Overview iPhone 5s iPhone 4s Phone
  • iPhone Devices Overview iPhone 5s iPhone 4s Phone Chip
  • iPhone Devices Overview iPhone 5s iPhone 4s Phone Chip Capacity 16GB, 32GB, 64GB 8GB
  • iPhone Devices Overview iPhone 5s iPhone 4s Phone Chip Capacity 16GB, 32GB, 64GB 8GB Dimension Height: 4.87 inches (123.8 mm) Width: 2.31 inches (58.6 mm) Height: 4.5 inches (115.2 mm) Width: 2.31 inches (58.6 mm)
  • iPhone Devices Overview iPhone 5s iPhone 4s Phone Chip Capacity 16GB, 32GB, 64GB 8GB Dimension Height: 4.87 inches (123.8 mm) Width: 2.31 inches (58.6 mm) Height: 4.5 inches (115.2 mm) Width: 2.31 inches (58.6 mm) FaceTime Camera 1.2MP photos (1280 by 960) VGA-resolution photos
  • iPhone Devices Overview iPhone 5s iPhone 4s Phone Chip Capacity 16GB, 32GB, 64GB 8GB Dimension Height: 4.87 inches (123.8 mm) Width: 2.31 inches (58.6 mm) Height: 4.5 inches (115.2 mm) Width: 2.31 inches (58.6 mm) FaceTime Camera 1.2MP photos (1280 by 960) VGA-resolution photos Sensors Three-axis gyro Accelerometer Proximity sensor Ambient light sensor Fingerprint identity sensor Three-axis gyro Accelerometer Proximity sensor Ambient light sensor
  • iOS 7 UI Design Basics • iOS App Anatomy • Starting and Stopping • Layout • Navigation • Modal Contexts • Interactivity and Feedback • Animation • Branding • Color and Typography • Icons and Graphics • Terminology and Wording • Integrating with iOS
  • • Bars • Content Views • Controls • Temporary Views iOS App Anatomy
  • iOS App Anatomy UIKit UI elements
  • iOS App Anatomy Windows layers of an iOS app
  • • Starting instantly • Always be prepared to stop Starting and Stopping
  • • As much as possible, avoid displaying a splash screen or other startup experience. • Avoid asking people to supply setup information. • Delay a login requirement for as long as possible. • In general, launch in the device’s default orientation. • Supply a launch image that closely resembles the first screen of the iOS app. • If possible, avoid requiring users to read a disclaimer or agree to an end-user license agreement when they first start your app. • When your app restarts, restore its state so users can continue where they left off. Starting Instantly
  • Starting Instantly Avoid displaying a splash screen or other startup experience. Recommended Not recommended
  • • An iOS app never displays a Close or Quit option. • Never quit an iOS app programmatically. • If all app features are unavailable, display a screen that describes the situation and suggests a correction. • If only some app features are unavailable, display either a screen or an alert when people try to use the feature. Always be Prepared to Stop
  • Always be Prepared to Stop If all app features are unavailable, display a screen that describes the situation and suggests a correction.
  • Always be Prepared to Stop If only some app features are unavailable, display either a screen or an alert when people try to use the feature.
  • • Make it easy for people to interact with content and controls by giving each interactive element ample spacing. • Make it easy to focus on the main task by elevating important content or functionality. • Use visual weight and balance to show users the relative importance of onscreen elements. • Use alignment to ease scanning and communicate groupings. • Make sure that users can understand primary content at its default size. • Be prepared for changes in text size. • As much as possible, avoid inconsistent appearances in your UI. Layout
  • Layout Make it easy for people to interact with content and controls by giving each interactive element ample spacing. Recommended Not recommended
  • Layout Make it easy to focus on the main task by elevating important content or functionality.
  • Layout Use visual weight and balance to show users the relative importance of onscreen elements.
  • • Hierarchical ! • Flat • Content or experience-driven Navigation
  • Navigation Hierarchical navigation
  • Navigation Flat navigation
  • Navigation Content navigation
  • • Users should always know where they are in your app and how to get to their next destination.! • Use navigation bar to give users an easy way to traverse a hierarchy of data. • Use tab bar to display several peer categories of content or functionality. • Use page control when each app screen represents an individual instance of the same type of item or page. • In general, it’s best to give users one path to each screen. Navigation
  • • It’s critical to get the user’s attention • A self-contained task must be completed or explicitly abandoned to avoid leaving the user’s data in an ambiguous state Model Contexts
  • Model Contexts
  • • Keep modal tasks simple, short, and narrowly focused. • Always provide an obvious and safe way to exit a modal task. • If the task requires a hierarchy of modal views, make sure your users understand what happens if they tap a Done button in a view that’s below the top level. • Reserve alerts for delivering essential and ideally actionable information. • Respect users’ preferences for receiving notifications. Model Contexts
  • • It’s critical to get the user’s attention • A self-contained task must be completed—or explicitly abandoned—to avoid leaving the user’s data in an ambiguous state Model Contexts
  • • Users know the standard gestures • Interactive elements invite touch • Feedback aids understanding • Inputting information should be easy Interactivity and Feedback
  • • Avoid associating different actions with the standard gestures. • Avoid creating custom gestures that invoke the same actions as the standard gestures. • Use complex gestures as shortcuts to expedite a task, not as the only way to perform it. • In general, avoid defining new gestures unless your app is a game. • For iPad, consider using multifinger gestures. Standard Gestures
  • Standard Gestures Tap To press or select a control or item. Drag To scroll or pan—that is, move side to side.
 To drag an element. Flick To scroll or pan quickly. Swipe With one finger, to return to the previous screen, to reveal the hidden view in a split view (iPad only), or the Delete button in a table-view row.
  • Standard Gestures Double tap To zoom in and center a block of content or an image. Pinch Pinch open to zoom in; pinch close to zoom out. Touch & hold In editable or selectable text, to display a magnified view for cursor positioning. Shake To initiate an undo or redo action.
  • • To signal interactivity, the built-in apps use a variety of cues, including color, location, context, and meaningful icons and labels. • Users rarely need additional decorations to show them that an onscreen element is interactive or to suggest what it does. Interactive Elements Invite Touch
  • Interactive Elements Invite Touch Text Color interactivity
  • Interactive Elements Invite Touch Text Back button interactivity
  • Interactive Elements Invite Touch Text Actionable title
  • Interactive Elements Invite Touch Text Music bordered button
  • Interactive Elements Invite Touch Text Clock bordered button
  • Interactive Elements Invite Touch Text App Store bordered button
  • • As much as possible, integrate status and other relevant feedback information into your UI. ! • Avoid unnecessary alerts. Feedback Aids Understanding
  • • Make it easy for users to make choices. • Get information from iOS, when appropriate. • Balance a request for input by giving users something useful in return. Inputting Information Should Be Easy
  • Inputting Information Should Be Easy Make it easy for users to make choices. A date picker in Reminders A list of options in Settings
  • • Add animation cautiously, especially in apps that don’t provide an immersive experience. • When appropriate, make custom animation consistent with built- in animation. • Use animation consistently throughout your app. • In general, strive for realism and credibility in custom animation. Animation
  • Animation Animation introduction
  • • Communicate status and provide feedback • Enhance the sense of direct manipulation • Help people visualize the results of their actions Animation
  • • Incorporate a brand’s assets in a refined, unobtrusive way. • Don’t take space away from the content people care about. • Resist the temptation to display your logo throughout the app. Branding
  • Branding Incorporate a brand’s assets in a refined, unobtrusive way. Recommended Not recommended
  • • Color enhances communication • Text should always be legible Color and Typography
  • • In iOS 7, color helps indicate interactivity, impart vitality, and provide visual continuity. • The built-in apps use a family of pure, clean colors that look great individually and in combination, and on both light and dark backgrounds. ! Color Enhances Communication
  • • In iOS 7, color helps indicate interactivity, impart vitality, and provide visual continuity. • The built-in apps use a family of pure, clean colors that look great individually and in combination, and on both light and dark backgrounds. Color Enhances Communication
  • • If you create multiple custom colors, make sure they work well together. • Pay attention to color contrasts in different contexts. • Take bar translucency and app content into account when you use a custom bar tint. • Be aware of color blindness. • Consider choosing a key color to indicate interactivity and state. • Avoid using the same color in both interactive and non-interactive elements. • Color communicates, but not always in the way you intend. • In most cases, don’t let color distract users. Color Enhances Communication
  • • Automatic adjustments to letter spacing and line height for every font size. ! • The ability to specify different text styles for semantically distinct blocks of text, such as Body, Footnote, or Headline. • Text that responds appropriately to changes the user makes to text-size settings (including accessibility text sizes). Text should always be legible
  • • If you create multiple custom colors, make sure they work well together. • Pay attention to color contrasts in different contexts. • Take bar translucency and app content into account when you use a custom bar tint. • Be aware of color blindness. • Consider choosing a key color to indicate interactivity and state. • Avoid using the same color in both interactive and non-interactive elements. • Color communicates, but not always in the way you intend. • In most cases, don’t let color distract users. Color and Typography
  • • The app icon • Bar icons • Graphics Icons and Graphics
  • • Every app needs a beautiful app icon. • It’s not unusual for people to base their initial opinions about your app’s quality, purpose, and reliability solely on the look of your app icon. The App Icon
  • • The app icon is an important part of your app’s brand. Approach the design as an opportunity to tell your app’s story and build an emotional connection with users. • The best app icons are unique, uncluttered, engaging, and memorable. • An app icon needs to look good at many different sizes and on different backgrounds. Details that might enrich an icon at large sizes can make it look muddy at small sizes. The App Icon
  • • iOS provides a lot of small icons—representing common tasks and types of content—for use in tab bars, toolbars, and navigation bars. • It’s a good idea to use the built-in icons as much as possible Bar Icons
  • Bar Icons Note that you can use text instead of icons to represent items in a navigation bar or toolbar.
  • • Support the Retina display. • Display photos and graphics in their original aspect ratio, and don’t scale them greater than 100%. • Don’t use images that replicate Apple products in your designs. Graphics
  • • Every word you display in an app is part of a conversation you have with users. • Use this conversation as an opportunity to provide clarity and to help people feel comfortable in your app. Terminology and Wording
  • Terminology and Wording Settings is an essential app for all users, so it uses simple, direct language to describe what users can do.
  • • Use terminology that you’re sure your users understand. • Use a tone that’s informal and friendly, but not too familiar. • Think like a newspaper editor, and watch out for redundant or unnecessary words. • Give controls short labels or use well-understood icons. • Take care to be accurate when describing dates. • Make the most of the opportunity to communicate with potential users by writing a great App Store description. Terminology and Wording
  • • Using standard UI elements correctly • Responding to changes in device orientation • Avoiding sending users to Settings • Taking advantage of iOS technologies Integrating with iOS
  • • Follow the guidelines for every UI element. • Don’t mix UI element styles from different versions of iOS. • In general, avoid creating a custom UI element that performs a standard action. • Don’t use system-defined buttons and icons to mean something else. • If your app enables an immersive task or experience, it may be reasonable to create completely custom controls. Using Standard UI Elements Correctly
  • • Maintain focus on the primary content in all orientations. • Launch your app in the supported orientation, regardless of the current device orientation. • Avoid displaying a UI element that tells people to rotate the device. • Support both variants of an orientation. • If your app interprets changes in device orientation as user input, handle rotation in app-specific ways. • On iPhone, anticipate users’ needs when you respond to a change in device orientation. • On iPad, strive to satisfy users’ expectations by supporting all Responding to Changes in Device Orientation
  • Responding to Changes in Device Orientation Launch your app in the supported orientation, regardless of the current device orientation.
  • • If possible, avoid sending users to Settings. • If necessary, let users set behaviors they want within your app. • As much as possible, offer configuration options in the main UI. Avoiding Sending Users to Settings
  • • iOS provides a wealth of technologies that support common tasks and scenarios in ways that users expect. • This expectation means that it’s almost always better to integrate system-supported technologies into your app than it is to design a custom approach. Taking Advantage of iOS Technologies
  • Icon and Image Design • App icon • Launch images • Bar button icons • Newsstand icons • Web clip icons • Creating resizable images
  • App Icon • Every app needs a beautiful, memorable app icon that attracts people in the App Store and stands out on their Home screen.
  • App Icon • For the best results, enlist the help of a professional graphic designer. • Use universal imagery that people will easily recognize. • Embrace simplicity. • Create an abstract interpretation of your app’s main idea. • If you want to portray real substances, do it accurately. • Make sure the app icon looks good on a variety of backgrounds. • Avoid transparency. • Don’t use iOS interface elements in your artwork. • Don’t use replicas of Apple hardware products in your artwork.
  • App Icon • Create different sizes of the app icon for different devices. For iPhone and iPod touch, both of these sizes are required: • 120 x 120 pixels • 60 x 60 pixels (standard resolution) For iPad, both of these sizes are required: • 152 x 152 • 76 x 76 pixels (standard resolution) 120 x 120 pixel icon after the mask is applied120 x 120 pixel icon before the mask is applied
  • App Icon • Create a large version of your app icon for display in the App Store. For the App Store, create a large version of your app icon in two sizes so that it looks good on all devices: • 1024 x 1024 pixels • 512 x 512 pixels (standard resolution)
  • Spotlight and Settings Icons • Every app should supply a small icon that iOS can display when the app name matches a term in a Spotlight search. • Apps that supply settings should also supply a small icon to identify them in the built-in Settings app.
  • Spotlight and Settings Icons • Supply separate icons for Spotlight search results and Settings For Spotlight search results on iPhone, iPod touch, and iPad create an icon in the following two sizes: • 80 x 80 pixels • 40 x 40 pixels (standard resolution) For Settings on iPhone, iPod touch, and iPad create an icon in the following two sizes: • 58 x 58 pixels • 29 x 29 pixels (standard resolution)
  • Launch Images • A launch image is a simple placeholder image that iOS displays when your app starts up. • The launch image gives users the impression that your app is fast and responsive because it appears instantly and is quickly replaced by the first screen of your app.! !
  • Launch Images • Supply a plain launch image that improves the user experience. In particular, the launch image isn’t an opportunity to provide: • An “app entry experience,” such as a splash screen • An About window • Branding elements, unless they are a static part of your app’s first
  • Launch Images • Design a launch image that is identical to the first screen of the app, except for Text and UI elements that might change.! Not recommendedRecommended
  • Launch Images • Create launch images in different sizes for different devices. For iPhone 5 and iPod touch (5th generation): • 640 x 1136 pixels For other iPhone and iPod touch devices: • 940 x 960 pixels • 320 x 480 pixels (standard resolution) For other iPhone and iPod touch devices: • 1536 x 2048 pixels • 768 x 1024 pixels (standard resolution)
  • Bar Button Icons • iOS defines lots of standard bar-button icons, such as Refresh, Share, Add, and Favorites. • As much as possible, you should use these buttons and icons to represent standard tasks in your app. • At a high level, you should aim for an icon design that is: • Simple and streamlined. • Not easily mistaken for one of the system-provided icons. • Readily understood and widely acceptable.
  • Bar Button Icons • Whether you use only custom icons or a mix of custom and standard, all icons in your app should look like they belong to the same family in terms of perceived size, level of detail, and visual weight. The family of iOS bar icons The coherent family of icons
  • Bar Button Icons • If you’re designing a custom tab bar icon, you should provide two versions—one for the unselected appearance and one for the selected appearance To create a filled-in version of an icon that has interior details (such as the Radio icon) invert the details so they retain their prominence in the selected version. Sometimes, a design needs a slight alteration to look good when it’s selected. For example, because the Timer and Podcasts icons include open areas, the selected versions condense the strokes a bit to fit into a circular enclosure.
  • Bar Button Icons If an icon becomes less recognizable when it’s filled in, a good alternative is to use a heavier stroke to draw the selected version. For example, the selected versions of the Voicemail and Reading List icons are drawn with a 4-pixel stroke, instead of the 2-pixel stroke that was used to draw the unselected versions. If an icon’s shape has details that don’t look good in a stroked outline. For example with Music and Artists icons) you can use the filled-in appearance for both versions of the icon. It’s easy for users to distinguish the selected and unselected appearances of such icons because the selected appearance is darker and gets the tint.
  • Bar Button Icons • To design a custom bar icon, follow these guidelines: • Use pure white with appropriate alpha transparency. • Not include a drop shadow. • Use antialiasing.
  • Bar Button Icons • Use a 2-pixel stroke (high resolution) for detailed icons and a 3- pixel stroke for less detailed icons. Create a toolbar or navigation bar icon in the following sizes: • About 44 x 44 pixels • About 22 x 22 pixels (standard resolution) Create a tab bar icon in the following sizes: • About 50 x 50 pixels (96 x 64 pixels maximum) • About 25 x 25 pixels (48 x 32 pixels maximum) for standard resolution
  • Newsstand Icons • If your app uses Newsstand Kit to publish subscription-based periodical content, you need to provide icons for display in the App Store and on people’s devices.
  • Newsstand Icons • A default Newsstand cover icon should be a generalized facsimile of the cover of a typical issue, which focuses on the parts of the cover that are fairly consistent from issue to issue. For example: • Avoid adding to the default cover icon elements that users would never see on an actual cover, such as a message to “tap here for the latest issue”.
  • Newsstand Icons • To display the current issue’s icon on the Newsstand shelf and in the multitasking UI, iOS scales your large icon to the following Device Scaled size (Newsstand shelf) Scaled long-edge size (multitasking UI) iPhone and iPod touch 180 x 160 pixels (90 x 80 pixels for standard resolution) 120 pixels (60 pixels for standard resolution) iPad 252 pixels for long edge (126 pixels for standard resolution) 152 pixels (76 pixels for standard resolution)
  • Web Clip Icons • If you have a website, you can provide a custom icon that users can display on their Home screens using the web clip feature. • Web clip icon sizes. For iPhone and iPod touch, create icons that measure: • 120 x 120 pixels • 60 x 60 pixels (standard resolution) For iPhone and iPod touch, create icons that measure: • 152 x 152 pixels • 76 x 76 pixels (standard resolution)
  • Creating Resizable Images • You can create a resizable image to customize the background of several standard UI elements, such as popovers, buttons, navigation bars, tab bars, and toolbars (including the items on these bars). • As a general rule, you should supply the smallest image: • If you want a solid color with no gradient, create a 1 x 1 point image. • If you want a vertical gradient, create an image that has a width of 1 point and a height that matches the height of the UI element’s background. • If you want to provide a repeating textured appearance, you need to create an image with dimensions that match the dimensions of the repeating portion of the texture. • If you want to provide a nonrepeating textured appearance, you need
  • UI/UX Design Strategies • UI/UX design principles • From Concept to Product • Case study
  • UI/UX Design Principles • Aesthetic integrity • Consistency • Direct manipulation • Feedback • Metaphors • User control
  • Aesthetic Integrity • Aesthetic integrity doesn’t measure the beauty of an app’s artwork or characterize its style; rather, it represents how well an app’s appearance and behavior integrates with its function to send a coherent message. • People care about whether an app delivers the functionality it promises, but they’re also affected by the app’s appearance and behavior in strong—sometimes subliminal—ways.
  • Aesthetic Integrity
  • Consistency • Consistency lets people transfer their knowledge and skills from one part of an app’s UI to another and from one app to another app. • A consistent app isn’t a slavish copy of other apps and it isn’t stylistically stagnant; rather, it pays attention to the standards and paradigms people are comfortable with and it provides an internally consistent experience.
  • Consistency
  • Direct Manipulation • When people directly manipulate onscreen objects instead of using separate controls to manipulate them, they're more engaged with their task and it’s easier for them to understand the results of their actions. • Using the Multi-Touch interface, people can pinch to directly expand or contract an image or content area. And in a game, players move and interact directly with onscreen objects—for example, a game might display a combination lock that users can spin to open.
  • Direct Manipulation
  • Feedback • Feedback acknowledges people’s actions, shows them the results, and updates them on the progress of their task. • The built-in iOS apps provide perceptible feedback in response to every user action. List items and controls highlight briefly when people tap them and—during operations that last more than a few seconds—a control shows elapsing progress.
  • Feedback
  • Metaphors • When virtual objects and actions in an app are metaphors for familiar experiences—whether these experiences are rooted in the real world or the digital world—users quickly grasp how to use the app. • It’s best when an app uses a metaphor to suggest a usage or experience without letting the metaphor enforce the limitations of the object or action on which it’s based. • Metaphors in iOS include:! • Moving layered views to expose content beneath them • Dragging, flicking, or swiping objects in a game • Tapping switches, sliding sliders, and spinning pickers • Flicking through pages of a book or magazine
  • User Control • People—not apps—should initiate and control actions. An app can suggest a course of action or warn about dangerous consequences, but it’s usually a mistake for the app to take decision-making away from the user. • The best apps find the correct balance between giving people the capabilities they need while helping them avoid unwanted outcomes. • Users feel more in control of an app when behaviors and controls are familiar and predictable. And when actions are simple and
  • From Concept to Product Prototype! Photoshop Illustrator Sketch Pop Xcode Storyboard Define! Online Research Conceptual Inquiry Personas Empathy Map Scenarios Storyboard Brainstorming Summarize! Discussion Documentation / Wiki Decision of Next Step Road Map Test Externally! Customer Meeting A-B Testing Survey Feedback System Validate Internally! Whiteboard + Pinboard Daily Scrum Internal Survey Meeting Minutes / Wiki Sketch! Sketchbook Whiteboard OmniGraffle / Balsamiq UXPin Illustrator Powerpoint Iterate! Plan and move to next cycle 1 2 3 4 5 6 7 Usability Testing Sketch! Sketch Your Concepts Screen Wireframing Major Interaction Prototype! Paper Prototyping Visual Design Static Image Prototyping iOS Prototyping Validate Internally! Get quick and frequent feedback from executive and team members Test Externally! Meet with customers, find niche group of target users Summarize! Validate and learn from user behavior Iterate! Plan and move to next cycle Define! Discovery and research to define user scenario and conceptual model
  • From Concept to Product • Defining and scoping your app • Sketching and Wireframes • Prototyping and iterating • Usability testing app concepts 1 2 3 4
  • • Creating your app definition statement • Getting started with user research • Analyzing user research • Evaluating the competition • Effective brainstorming • Design Tools 1 Defining and Scoping Your App
  • Creating your App Definition Statement • An app definition statement is a concise, concrete declaration of an app’s main purpose and its intended audience. • Create an app definition statement early in your development effort to help you turn an idea and a list of features into a coherent product that people want to own. • Throughout development, use the definition statement to decide if potential features and behaviors make sense. • Steps: List all the features you think users might like Determine who your users are Filter the feature list through the audience definition 1 2 3
  • Listing All Features You Think Users Might Like • At this point, you’re trying to capture all the tasks related to your main product idea. • Imagine that your initial idea is to develop an app that helps people shop for groceries. You must list the potential features- that users might be interested in.! • For example: • Creating lists • Getting recipes • Comparing prices • Locating stores • Annotating recipes • Getting and using coupons ! • Viewing cooking demos • Exploring different cuisines • Finding ingredient substitutions
  • Determining Who Your Users Are • Now you need to figure out what distinguishes your app’s users from all other iOS users. In the context of your main idea, what’s most important to them? • Using grocery-shopping example, you might ask whether your users: • Usually cook at home or prefer ready-made meals • Are committed coupon-users or think that coupons aren’t worth the effort • Enjoy hunting for speciality ingredients or seldom venture beyond the basics • Follow recipes strictly or use recipes as inspiration • Buy small amounts frequently or buy in bulk infrequently • Insist on specific brands or make do with the most convenient
  • Determining Who Your Users Are • After musing on these questions, imagine that you decide on three characteristics that best describe your target audience: • Love to experiment with recipes • Are often in a hurry • Are thrifty if it doesn’t take too much effort
  • Filtering Feature List Through Audience Definition • If, after deciding on some audience characteristics, you end up with just a few app features, you’re on the right track: Great iOS apps have a laser focus on the task they help users accomplish. • For example, consider the long list of possible features you came up with in Step 1. Even though these are all useful features, not all of them are to be appreciated by the audience you defined in Step 2.! • When you examine your feature list for your target audience, you conclude that your app should focus on three main features: Creating lists, getting and using coupons, and getting recipes. • Now you can craft your app definition statement, concretely summarizing what the app does and for whom. A good app definition statement for this grocery-shopping app might be:
  • Getting Started with User Research • Common user research questions • Choosing user research methods • Planning your research !
  • Analyzing User Research • Share the wealth • Analyze notes • Document implications and ideas • Report findings
  • Share the Wealth • One of the first things to do after a study is gather the artifacts and post them in a place where other team members can view them. • Intranets and wikis are great, but so is an actual physical space within your company. You can use invisible tape on the wall, whiteboard, or foam core. • Benefits of the artifacts visible: • Surrounding everyone with this content will create a shared understanding within your organization. • It simplifies analysis since the medium makes it easy to collaboratively analyze findings. • The physical representation can be referred to in the later design
  • Share the Wealth Participant board for iPhone field interview analysis
  • Analyze Notes • The depth and format of your interview notes (handwritten, transcripts, verbatim notes) will influence your approach. • Tips for this type of analysis: • Try to limit your team to four to six people. • Minimize conversations and debates while writing up observations. • Ensure that observations are written in concise phrases or sentences. • If one sticky group is much larger than the others, consider splitting • Connect related sticky groups with lines. • Collaboratively prioritize findings when all observations have been placed within a group. • Provide a key if you color-code your stickies (e.g., heading vs findings vs
  • Analyze Notes Affinity diagram for iPhone field interview analysis
  • Document Implications and Ideas • Implications suggest best practices or design principles your team wants to follow, whereas ideas are specific features or concepts you may want to incorporate in the actual design. • These should also be written on stickies, using a different color from the observations and titles. You may want to post a color key if other team members are involved in the process. • At the end of the day, take photos of the groupings in case any stickies get accidentally moved or fall off the wall. • Doublesided tape can help keep the stickies in place. If you want to create electronic versions of your affinity diagrams, consider using the Stickies Dashboard widget on the Mac or lino (http://en.linoit.com), a webbased tool for organizing sticky notes
  • Document Implications and Ideas Affinity diagram with implications and ideas
  • Report Findings • Quick Findings report will give you an opportunity to stew on the material and brainstorm additional implications and ideas. This report also makes your findings more portable, because you can take them anywhere once you’ve moved from the sticky notes to electronic documents. • There are countless ways to organize your findings and make them more shareable (e.g., in a report, presentation, wiki, summary poster) • Report elements: • Methodology and goals • Team members • Participant profiles
  • Evaluating the Competition • Benefit • Apps to include • Choosing a competitive analysis method !
  • Benefit • Competitive UX analyses can help your team uncover best practices as well as approaches to avoid when designing your app. • These analyses can assess how competitors are meeting the user needs identified in your up-front user research and uncover market opportunities. • Best practices • What to avoid? • Needing alignment • Inspiration
  • Apps to Include • As you prepare your list of apps to analyze, consider consulting with your friends, perusing relevant categories in the App Store, and reading app reviews of competitive or similar apps. • It may be tempting to focus exclusively on your top competitors, but that’s not necessarily the most effective strategy. • If your top competitors have nearly identical user experiences, you may not learn anything significant after evaluating the first one. • Instead, you may find it valuable to expand your evaluation to include emerging comp.
  • Choosing a Competitive Analysis Method Method Strengths Weaknesses Needs alignment charts Good for assessing where competitors are meeting user needs No best practices or inspiration Two-by-two diagrams Good way to illustrate how the app fits into the overall competitive landscape No best practices or inspiration
 Attributes highly subjective Heuristic evaluations Fast and inexpensive Dependent on reviewer’s expertise and heuristics used Good for determining best practices and finding inspiration Competitive benchmarking Good for gathering quantitative data Time-consuming and expensive No understanding of why behind behaviors unless follow-up interview is included
  • Effective Brainstorming • To kick off your app concept explorations, consider holding a group brainstorming session. • To avoid this outcome, try some following brainstorming advice: • Set aside enough time • Establish goals • Be inclusive • Have an agenda • Provide inspiration • Lay ground rules • Capture ideas • Select promising idea
  • Effective Brainstorming
  • Guidelines • Always have a reason for customization. • As much as possible, avoid increasing the user’s cognitive burden. • Be internally consistent. • Always defer to the content. • Think twice before you redesign a standard control. • Be sure to thoroughly user-test custom UI elements.
  • Design Tools • To make your research findings more readily accessible, you may want to distill the content in a variety of ways. • Tools to create design: • Contextual Inquiry • Personas • Empathy map • Stakeholder map • Scenarios • User Journeys • Storyboard • “Agile schedule”
  • Contextual Inquiry • Day-in-the-life sessions • Observe/interview people in their context • Pair of observers is ideal • Key benefits: • Best way to understand your users • Only way to know what the real work flow/process is (vs the official one) • Opportunity to discuss with users what they are doing and why !
  • Contextual Inquiry
  • Personas • Characterization of a type of user that we want to target with our product/application • Personas are categorized: • Primary personas are the ones whose needs you must address for business. • Secondary personas are important but lower priority. • Negative personas are the ones you’re clearly not addressing for business.! • Personas contain:! • Name, profession, age, location • Attitudes & activities • Influencers • Workflows • Pain points and frustrations • Goals
  • I often get caught up in my iPhone. Marta, College Sophomore Every morning Marta reaches across her bed to grab her iPhone to check her email, and Facebook. A persona represents a cluster of users who exhibit similar behavioral patterns in their purchasing decisions, use of technology or products, customer service preferences, lifestyle choices, and the like. Behaviors, attitudes, and motivations are common to a "type" regardless of age, gender, education, and other typical demographics. In fact, personas vastly span demographics. ” -- Kevin O’Connor Persona:! • Gives a human face to every target group! • Helps teams to focus on user’s problems not features! • Represents research data in an easy way (if it’s backed with data) Marta typically brings both her Macbook and iPhone to campus. 19 Sophomore at NYU majoring in psychology Marta mostly uses the iPhone for fun, but she’s been experimenting with some apps for school. Reference apps, such as the flash cards for her Chinese class, have been more valuable to her. College Student Check email, calendar and Facebook Stay in contact with friends and family Enjoy simple and pleasing aesthetics Many apps feel disconnected (e.g,, she edits photos with Photoshop before posting them to Facebook) Impulsive buyer Experiment user Entertain herself
  • • Explore a target user (persona) from different perspectives: Who am I? Behavior, See - Motivations, Do - Features, Say, Feel • Question: Who are your users? What do they need/want? • Key benefits of empathy map: • Very quick way to have a holistic view of your target user • Forces you to think about more than their role • Allow team to ground communication throughout development Empathy Map
  • Empathy Map Hears Feels Thinks Sees Says Does Pains Gains
  • Empathy Map
  • Empathy Map
  • • A network diagram of the people involved with (or impacted by) a given system design • Who does it? The Team • Key benefits: • Establish shared ideas about stakeholders • Help team focus on people, not technology • Guide plans for user research • Document research activities Stakeholder Map
  • Stakeholder Map
  • • Draw simple icons to represent individual people! • Label individuals by specific role • Write a speech-bubble to summarize thoughts and feeling • Draw lines with arrows connecting the people • Label lines to describe relationships between people • Circle and label related groupings Stakeholder Map Tips
  • Scenarios • Scenarios describe how personas may use your app to achieve their goals. • In the very early stages, scenarios tend to be written at a high level without many user interface elements, and allow your team to brainstorm a wide variety of design directions, rather than confining yourselves to a particular solution.! • Scenario content typically includes the following information: • Motivation • Context • Distractions • Goal
  • Scenarios • Motivation • What prompted the persona to embark on the scenario? !
  • Scenarios • Motivation • Context • Where is the persona while the scenario is taking place? • Does the context change over the course of the scenario? • Who else is involved? • What other devices are involved? !
  • Scenarios • Motivation • Context • Distractions • What kinds of distractions or interruptions typically occur in the scenario? • How does the persona deal with such distractions? !
  • Scenarios • Motivation • Context • Distractions • Goal • What is the persona’s goal in the scenario? • Is it information, an artifact, an emotion?! !
  • Scenarios Need Scenario with College Sophomore Persona Getting to a new classroom ! It’s the first day of Marta’s sophomore year at NYU. She just finished eating lunch at a café on Waverly Place and is scanning her afternoon schedule in iCal, which she synced to her iPhone from her laptop the night before. ! Marta notices that her 2:00 p.m. class is held in the Puck Building. Although Marta is a sophomore, she’s never taken any classes at Puck. She goes to the NYU web site using Safari on her iPhone, but the site isn’t formatted for the device. After several minutes of pinching and zooming, Marta finally finds the building. It’s not linked to Google Maps, so she mentally notes the cross streets before exiting Safari. ! Brainstorm topic: ! How can an iPhone app make Marta’s life easier? Name: Marta, College Sophomore
  • Scenarios • Common questions • How many scenarios should I write? • Are scenarios just for design? • What’s the difference between use cases and scenarios? • What about user “stories”? !
  • From Scenarios to Use Cases • Use cases are much more concise than scenarios and may include aspects of the back end, often called the “system.” • They help uncover flow and usability issues in the later stages of design, but they are generally too system- oriented for early- stage brainstorming. • The NYU iPhone app, for example, could be described with the following use cases: • User chooses building list. • System provides list. • User chooses P. • System shows buildings that start with P.
  • From Scenarios to User Stories • User stories are commonly used in the Agile software development process. • They tend to be more feature-oriented than scenarios since they must be broken down for the “backlog” (items planned for the next development cycle). • Moreover, although the term story is used, user stories read more like requirements given the language and specificity. • The NYU iPhone app, for example, could be described with three potential user stories: • A user can browse campus buildings by name. • A user can view detailed information for each building. • A user can get directions to each building.
  • User Journeys • User journeys offer an effective way to share research findings. • The design team can use them as a quick reference throughout the design process or as a communication tool when explaining design decisions to other members of your company. • The journeys typically encompass the entire user experience— from app discovery to app usage along an abstract timeline— with each part kept at a very high level. • User journeys may seem overly linear at first glance, but they are not meant be taken literally. It may help to view them as design requirements based on persona needs, rather than actual user flows.
  • User Journeys • The user journey created for an app that complements an existing web site for art events: Discover! Where they learn about the app Find! How they find events Learn! What they need to decide to attend Attend! What they need to get to the event Review! What they want to include in a review All Personas App Store Artist name, reviews, images, description Venue name and address Martin! Local art enthusiast Our web site Artist friends Galleries Prefers to search or browse for genre or artist of interest Number of days before the event closes May not need maps if attended the venue in the past Prefers to do lengthy reviews, thus more likely to do via the website Katherine! Local art dabbler Our web site Galleries Relies on popular lists or proximity to work/ home Days before the event closes and gallery hours Often needs maps and directions Occasionally does brief text reviews Zoe! Tourist art enthusiast Art magazines Often seeks out a genre or artist of interest; hotel may be located in an area with galleries Gallery hours Needs maps and directions Prefers to do lengthy reviews; may write in the hotel on a laptop Charles! Tourist art dabbler Guidebook Google Time Out New York Relies on popular lists and proximity to hotel Gallery hours Needs maps and directions Rarely does reviews; if anything may do thumbs up/down
  • Storyboard • Use of story telling to quickly visualize/share a solution to specific problem making use of personas and their behaviors, stories and any known constraints. • Who does it? The team • Key benefits: • Help us think about the problem in a creative way • Facilitates focused communication • Affordable and easy to do
  • Storyboard
  • • Visual project schedule on butcher paper containing: • Weekly milestones • Existing design and layout info • User stories with due dates • Non-functional requirements “Agile Schedule” • Any other high-level task that needs to be tracked and completed before launch
  • • Creating design-friendly environment • Sketching your concepts • Screen wireframing • Major interaction 2 Sketching and Wireframes
  • Creating Design-Friendly Environment • Before getting started, spend some time creating a design- friendly work environment. • Equipments for brainstorming and day-to-day design: • Conference room with one large wall • Whiteboard and camera • Foam core • Easel Post-its • Sketchbooks • Pencils and markers • Odds and ends • Snacks
  • Creating Design-Friendly Environment Good Design Faster workshop run by Adaptive Path
  • Sketching Your Concepts • Characteristics • Benefits • But I can’t draw • Sketching tips • Types of sketching • Sketching tools
  • Sketching Your Concepts Developer sketching at iPhone Dev Camp, Silicon Valley
  • Characteristics • The term sketch means different things to different people that helps designers think through an idea and the resulting artifact that communicates the idea. • Sketches in this context tend to have these qualities: • Minimal detail • Limited refinement • Ambiguity
  • Benefits • Some benefits of starting with hand-drawn sketches: • Think big • No boundaries • Improve collaboration
  • But I Can’t Draw • Getting into sketching may seem challenging given that many people are accustomed to drawing with software. • Sketching can be intimidating when looking at the work of experienced designers - their sketches can technically be described as rough and ambiguous but they are still somehow beautiful. • Solutions: • Taking a drawing class • Starting with tracing or stencils, then slowly add your own design elements
  • But I Can’t Draw iPhone Stencil Kit by Design Commission
  • Sketching Tips • Start simple • Draw almost to scale • Consider all of the senses
  • Types of Sketching • Diagrams • Posters • App screens • Storyboards - Sketchboards • Sketch examples
  • Diagrams • Concept diagram • Flow diagram ! !
  • Concept Posters • Concept posters are a powerful way to illustrate your app vision without getting into the design details. • Alexa Andrzejewski, the founder of Foodspotting, developed a concept poster template, which includes the following: • App name and tagline • Pitch • Characteristics • Inspiration
  • Concept Screens • Concept screen sketches are effective way to explore alternative directions without getting into design details. With this approach, the designer may illustrate one aspect of the user experience, while explaining other elements in written annotations or verbally. • Aspects of these sketches that work well include the hand gestures, simple screen contents, and concise annotations. • Screen sketches can also be used to explore alternative interaction models for a particular concept.
  • Concept Screen Your World concept for the Smart.fm iPhone “Scratch-off” concept for the Smart.fm iPhone
  • Storyboards - Sketchboards • Storyboards contain a series of illustrations or images displayed in sequence • With user-centered design, the “story” behind the storyboard is typically one of the scenarios from up-front user research. • Each illustration in the sequence represents an action the user must take to reach the scenario goal. • Storyboards may include arrows or instructions to indicate movement as well as annotations.
  • Storyboards - Sketchboards Alternative interaction models explored for the Things iPhone app
  • Storyboards - Sketchboards Storyboard for a project management app
  • Storyboards - Sketchboards Storyboard for a children’s game app
  • Sketch Examples Augmented reality app comic created with Pixton
  • Sketch Examples Augmented reality app comic created with Pixton
  • Sketch Examples Sketches exploring gestures for a personal finance iPhone app
  • Sketch Examples Sketches exploring an answer selection for a quiz iPhone app
  • Sketching Tools • Photoshop • Illustrator • Sketch • UXPin • ...
  • • Why prototype? • Prototype approaches • Screen mockup • Paper Prototype • iOS Prototype • Summary 3 Prototyping and Iterating
  • Why Prototype? • Prototypes can help you solve design problems, evaluate designs, and communicate design ideas. • These up-front activities can also expedite the development process, saving valuable time and money. The most common estimate is that it’s 100 times cheaper to make a change before any code has been written than it is to wait until after the implementation is complete. ! —Jakob Nielsen ”
  • Why Prototype? • Features of prototyping: • Solving design problems • Evaluating design ideas • Communicating design ideas
  • Prototyping Approaches • Paper prototyping • Static images on device prototyping • iOS prototyping with Xcode storyboard
  • Paper Prototyping • Paper prototyping introduction • Benefits! • Issues to explore • Challenges • How to do it?
  • Paper Prototyping Introduction • Paper prototyping: Getting user data before you code • In my experience, designers almost never use paper prototyping in real design projects despite its potentially immense contribution to creating a high-quality user experience.! • With a paper prototype, you can user test early design ideas at an extremely low cost. Doing so lets you fix usability problems before you waste money implementing something that doesn't work.
  • Paper Prototyping Paper prototype of a ride-sharing iPhone app
  • Paper Prototyping Paper prototype of an iPhone with the Home screen
  • Benefits • Quick iterations • Inexpensive! • Collaborative • Easy to edit
  • Issues to Explore • App concepts • Do users understand your app’s central concept?
  • Issues to Explore • App concepts • Workflows • Is the overall navigation clear? Are there too many steps to complete tasks?!
  • Issues to Explore • App concepts • Workflows • Information organization • Does the current organization match users’ expectations?
  • Issues to Explore • App concepts • Workflows • Information organization • Terminology • Are the labels on tabs, screens, and buttons clear?
  • Issues to Explore • App concepts • Workflows • Information organization • Terminology • Additional features • Over the course of evaluating your app, you may uncover additional features that users need.
  • Challenges • Paper prototypes are less suitable for refining low-level interactions such as transitions, scrolling, and swiping. • Paper prototypes may also be less useful for certain classes of apps, such as musical instruments, videos, and games.
  • How to Do it? • Steps for creating paper prototyping • Backgrounds • Screens • Preparing the controls
  • Steps for Creating Paper Prototyping • Step 1: Gather materials • You may prepare the following materials on hand: whiteboard, pencil, marker, cardboard, removable tape, glue, correction fluid, and scissors.
  • Steps for Creating Paper Prototyping • Step 1: Gather materials • Step 2: Determine the form factor • At some point your designs will have to match the iPhone screen dimensions—320 x 480 pixels (640 x 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
  • Steps for Creating Paper Prototyping • Step 1: Gather materials • Step 2: Determine the form factor • Step 3: Create the prototype • Your prototype will include a background, the screens, and the user interface controls. • As you create the prototype, be sure your scenarios and application flowchart are readily available.
  • Backgrounds • If your prototype is much larger than the iPhone, you may want to frame your designs with a cutout iPhone made with foam core or cardboard. • This frame can help orient participants when usability-testing your app. • Alternatively, if your prototype matches the iPhone dimensions, you can adhere it to the device, potentially making it “feel” closer to the real thing.
  • Screens • Your app screens can be hand-drawn or screenshots. • Hand-drawn sketches tend to elicit high-level conceptual feedback, whereas screenshots may lead to low-level visual feedback. • If possible, stick with one approach, not half hand-drawn screens and half screenshots. • A few notable exceptions are photos, maps, and keyboards: Printing these out will save time, and they’ll work fine when
  • Preparing the Controls • Tab bar • Keyboard • Sliders • Text entry • Pickers • Highlight • Alerts • Segmented controls
  • Tab Bar • Create highlighted and non-highlighted versions of tab states • Use text if you haven’t decided on the appropriate tab icon. Paper prototype with a tab bar
  • Keyboard • You can use hand-drawn keyboard sketches or screenshots. • It’s not necessary to have the pressed state for each button, but pay attention to the default colors and special contextual keys such as those for web and email addresses. Sample sketch with a keyboard printout
  • Sliders • Sliders can be created with a tiny piece of construction paper folded over a narrow strip of paper. • If you’re short on time, you can provide verbal feedback as the user moves a finger back and forth across the slider. • This verbal approach can also be applied to progress bars (e.g., “Downloading 1 of 10”). Example of a slider
  • Text Entry • For text entry, participants can write on Post-its or removable tape. • Alternatively, they can use a pencil to write directly on the prototype. • Be forewarned: Even with good erasing, if participants write too hard, your next user may see what the previous one wrote.
  • Pickers • Pickers provide essentially the same function as drop-down lists on web or desktop applications. • Given that they can include a large number of items, you may need a long strip of paper to display all of the options. • The strip can be folded and tucked away when the user is not interacting Example of a time picker
  • Highlight • Consider creating a highlight cutout that you can move up or down as the user makes selections. • Another option is to buy transparent plastic sheets, which come in a variety of colors. Example of a highlight
  • Alerts • Consider using a different background color for your alerts. • Make sure they don’t completely obscure content that should be visible underneath Example of a alert overlay
  • Segmented Controls • Include different states of segmented controls, which are typically used for filters or sorts. • Each state can show a different “segment” of the control highlighted. Segmented control example
  • Static Images on Device Prototyping • Introduction • How to do it? • Viewing method
  • Introduction • Once you have refined your overall concept and flows, you may want to create screen captures of your designs and display them on the iPhone. • If you link the images with “hot spots,” you can offer a more exploratory user experience since no one needs to play the role of “computer” while switching out user interface elements.
  • How to Do it? • To start, you’ll want to create 320 x 480 images of your app screens. • Many drawing programs have iPhone templates built into the software or available for download. • There are some drawing programs used by iPhone UI designers: • OmniGraffle • Fireworks • Photoshop • Illustrator • Sketch • UXPin
  • Viewing Methods • Viewing via Built-in Slideshow • Viewing via Safari (online) • LiveView
  • iOS Prototyping with Xcode Storyboard • Introduction • How to do it?
  • Introduction • Prototypes can be developed using the iPhone SDK within Interface Builder Storyboard of Xcode IDE. • While some design professionals may argue that “working code” is not prototyping, it really depends on the domain and the prototype complexity. • For example, paper prototyping would be inadequate for exploring a musical instrument app. • In this case, digging into Apple’s Audio Library may be the most efficient way to experiment and figure out what’s possible.
  • How to Do it? • Step 1: Create project in Xcode • Step 2: Design scene interface in Storyboard • Step 3: Implement transition between scenes and some UI details of of your app prototyping • Step 4: Run your app prototyping in iOS simulator
  • Summary • Before you invest significant engineering resources into the implementation of your design, it’s a really good idea to create prototypes for user testing. • You can get some useful feedback from testing wireframes, but their sparseness may mislead testers. • The easiest way to create a credible prototype is to use a storyboard-based Xcode template to build a basic app • Then, install the prototype on a device so that your testers can have as realistic an experience as possible. • You must make design adjustments in response to feedback. • With a short turnaround time, you should be able to test several iterations of your prototype before you solidify your design and commit resources to its implementation
  • • What is usability testing? • Why usability testing? ! ! 4 Usability Testing App Concepts
  • What is Usability Testing? • Usability testing is an umbrella term for a variety of methods that involve observing users as they interact with a product, typically with a set of predefined tasks • Validate internally: • Purpose: get quick and frequent feedback from executive and team members • Tools: whiteboard + pinboard, daily scrum, internal survey, meeting minutes • Test externally: • Purpose: Meet with customers, find niche group of target users
  • Why Usability Testing? • Help resolve known design issues • Uncover unknown design issues • Set a baseline for future study • Gather information for the next release • Get stakeholder buy-in
  • • Usability testing on paper versions of wireframes or sketches that users can simulate slicks and talk through their thoughts and decisions. Paper Prototype Usability Testing • Key benefits: • Fastest and cheapest way to validate ideas/assumptions • Results can be fed back into the design process immediately • You can do this at any time you are not sure what is the best UI for a specific problem
  • Case Study: From Desktop to iOS • From desktop to iOS • From website to iOS
  • From Desktop to iOS • Keynote on iPad • Mail on iPhone • Web content in iOS
  • Keynote on iPad • Keynote on the desktop is a powerful, flexible app for creating world-class slide presentations. • Makes Keynote on iPad with a user experience that: • Focuses on the user’s content • Reduces complexity without diluting capability • Provides shortcuts that empower and delight • Adapts familiar hallmarks of the desktop experience • Provides feedback and communication via eloquent animation
  • Keynote on iPad Keynote on desktop
  • Keynote on iPad • A streamlined toolbar: Only seven items are in the toolbar, but they give users consistent access to all the functions and tools they need to create their content. • A simplified, prioritized inspector that responds to the user’s focus. The Keynote on iPad inspector automatically contains the tools and attributes people need to modify the selected object.
  • Keynote on iPad • Lots of prebuilt style collections. People can easily change the look and feel of objects such as charts and tables by taking advantage of the prebuilt styles. • Direct manipulation of content, enriched with meaningful animation. In Keynote on iPad, a user drags a slide to a new position, twists an object to rotate it, and taps an image to select it.
  • Mail on iPhone • Mail is one of the most highly visible, well-used, and appreciated apps in OS X. • It is also a very powerful program that allows users to create, receive,, and store email, track events, create notes and invitations. • Mail on iPhone delivers this condensed functionality in a UI tailored for the mobile experience that includes: • A streamlined appearance that puts people’s content front and center • Different views designed to facilitate different tasks • An intuitive information structure that scales effortlessly • Powerful editing and organizing tools that are available when they’re needed
  • Mail on iPhone Mail on desktop
  • Mail on iPhone • Distinct, highly focused screens. Each screen displays one aspect of the Mail experience: account list, mailbox list, message list, message view, and composition view.
  • Mail on iPhone • Easy, predictable navigation: making one tap per screen, people drill down from the general (the list of accounts) to the specific (a message). • Simple, tappable controls, available when needed: because composing a message and checking for new email are primary actions people might want to take in any context, Mail on iPhone makes them accessible in multiple screens. • Different types of feedback for different tasks: when people delete a message, it animates into the trash icon.
  • Web Content in iOS • Safari on iOS provides a preeminent mobile web-viewing experience on iOS devices. People appreciate the crisp text and sharp images and the ability to adjust their view by rotating the device or pinching and tapping the screen. • The most successful websites typically:! • Set the viewport appropriately for the device, if the page width needs to match the device width • Avoid CSS fixed positioning, so that content does not move offscreen when users zoom or pan the page • Enable a touch-based UI that does not rely on pointer-based interactions
  • From Website to iOS • Muachung on iPhone • Zaloza on iPhone • HDViet on iPad
  • IBM Designcamp
  • Practicing UX Design Design iPhone app which help children to learn english and know about animals.
  • Practicing UX Design • Defining and scoping your app • Sketching and Wireframes • Prototyping and iterating • Usability testing app concepts 1 2 3 4
  • Defining and Scoping Your App • Contextual inquiry • Empathy map • Personas • Scenario • Storyboard
  • Sketching and Wireframes • Storyboard - Sketchboards • Screen wireframing • Major interaction !
  • Prototyping and iterating • Paper prototyping • iOS prototyping using Xcode storyboard ! !
  • Documentation Concept of UX Design http://en.wikipedia.org/wiki/User_experience_design http://www-01.ibm.com/software/ucd/designconcepts/whatisUXD.html Personas http://uxmag.com/articles/personas-the-foundation-of-a-great-user-experience Mobile Patterns http://mobile-patterns.com http://uxarchive.com Paper Prototyping http://www.nngroup.com/articles/paper-prototyping/ Cocoa Application Competencies for iOS https://developer.apple.com/library/ios/documentation/general/conceptual/Devpedia-CocoaApp/ Window.html Auto Layout Guide https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/ Introduction/Introduction.html UIKit User Interface Catalog https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/UIKitUICatalog/
  • many thanks to lamvt@fpt.com.vn please say Stanford University https://developer.apple.com Developer Center http://www.stanford.edu/class/cs193p xin chào
  • Next: Project Review 1