Application development process. Interaction Design Principles

Size: px

Start display at page:

Download "Application development process. Interaction Design Principles"

Meredith Gibbs
5 years ago
Views:

1 Application development process Interaction Design Principles

2 Overview Good/Bad UI Design Interaction Design Principles Screen layouts Navigation Patterns Screen Flows Prototyping

3 Preview of UI Analysis/Design Process UI Design Inputs: Use Cases Activities: Validate Technical Feasibility, Customer Validation, User Validation Deliverables: Proof of Concept Wire Frames, Storyboards, Prototypes Document Inputs: Data Requirements, Business Rules, Use Case Activities: Write UI Specifications, Conduct Review Meetings Deliverables: UI Specification (Navigation Flow, Screen Captures, Controls w/ Behaviors, Error Messages), Detailed Usability Test Plans Refinement Inputs: UI Specification, Prior Research, Code Activities: Formal Usability Testing Deliverables: Test Results Report

4 Bad UI Design

5 Bad UI Design

6 Good UI Design

7 Good UI Design

8 Good UI Design Good UI Design: Aesthetically pleasing Familiar Logical Functional Efficient

9 Interaction Design Principles Learnability Efficiency Memorability Error Recovery Simplicity Mapping Visibility Feedback Consistency Satisfaction

10 Learnability An interface should be easy to use from the first time a user interacts with it. Amount of functionality presented to the user should be limited to exactly what the user requires to get the goal done.

11 Efficiency Number of steps it takes for a user to complete a task. Key tasks should be made as efficient as possible.

12 Efficiency

13 Memorability Interface should be easier to use each time the user interacts with it. Frequency of use is the key factor in memorability.

14 Error Recovery In perfect user interface, user should never be allowed to make a mistake.

15 Simplicity Usual tasks should be easy and less common tasks should be possible. Avoid unnecessary functionality and keep the visual design and layout uncluttered.

16 Mapping What the user expects to happen when they interact with the user interface is exactly what should happen.

17 Visibility Important information should be the most visible. Less important information should be less visible. Understanding the users goals is critical.

18 Feedback User should always be in control of the user interface and not the other way around.

19 Consistency Like-items should always be displayed and act the same way across the entire application (and even between applications). UI standards.

20 Satisfaction How much the user enjoys or dislikes the software.

21 Screen Design The basic layout and flow of screens should be designed before any implementation begins. This will save work that would result in changed screen designs later. The screen design should give the developer, client, and end user a basic idea of how the app will look, feel, and function.

22 What makes good Navigation? Primary navigation patterns: Springboard List Menu Tab Menu Gallery Dashboard Metaphor Mega Menu

23 Primary navigation patterns

24 Springboard The Springboard pattern is OS neutral, working equally well across devices. It is also sometimes referred to as a Launchpad.

25 Springboard The Springboard is characterized by a landing page of menu options that act as a jumping off point into the application.

26 Springboard Facebook followed the Springboard design of the ios home screen, and they were quickly emulated by other applications.

27 Springboard Personalized Springboards can be used to display personal profile information inline with the menu options. Typically a customization feature is available for changing the Springboard layout.

28 Grids layouts for Springboard - Use a grid layout for items of equal importance, or an irregular layout to emphasize some items more than others. - Consider personalization and customization options.

29 2x2 grid layout, Norton Mobile; irregular layout, Masters

30 List Menu The List Menu is similar to that Springboard in that each is a jumping off point into the application.

31 List Menu There are numerous variations of this pattern including personalized list menus, grouped lists, and enhanced lists.

32 List Menu Enhanced lists are simple List Menus with additional features for searching, browsing or filtering.

33 List Menu List Menus work well for long titles or those that require sub text. Applications using List Menus should offer an option on all internal screens for returning to the List Menu, usually a button in the title bar with a list icon or the word menu.

34 Tabs Tab navigation is not OS neutral since each OS has their own guidelines for tab location and design. When choosing this pattern for your application, be prepared to customize the tab location for the different OSs.

35 Tabs Bottom tabs, favored by ios, WebOS, and BlackBerry, are the most thumb friendly option.

36 Tabs Horizontally scrolling bottom tabs, as shown in the Starbucks and Blue Mobile apps, provide a useful mechanism for offering more options without having to open up a More...screen.

37 Tabs Top tabs, favored by Android, Symbian, and Windows, look familiar since they are modeled after standard website navigation patterns. Nokia and Windows both use scrolling top tabs that you can flick to reveal more menu options.

38 Tabs Clearly indicate the selected menu item by visually differentiating the selected tab from the others. Use easy to recognize icons or icons with labels.

39 Gallery The Gallery pattern surfaces individual pieces of content for navigation. Content is usually individual articles, recipes, photos, or products and can be arranged in a carousel, grid, or slideshow.

40 Gallery The Gallery pattern works best for frequently updated content that people want to browse.

41 Gallery Sometimes the content will be easier to browse if it is grouped. Dwell use side tabs to organize gallery content into manageable chunks.

42 Dashboard Dashboards provide a roll-up of key performance indicators, KPIs. Each metric can be drilled into for additional information. This primary navigation pattern is useful for financial applications, analytics tools and sales and marketing applications. Don t overload the dashboard; conduct research to determine the key metrics to include.

43 Metaphor This pattern is characterized by a landing page modeled to reflect the application s metaphor.

44 Metaphor This is used primarily in games, but can also be seen in applications that help people catalog and categorize items, like notes, books, wine, etc.

45 Metaphor Use the Metaphor pattern judiciously, as a poorly implemented metaphor can look a lot like the Novel Notion anti-pattern.

46 Mega Menu A mobile Mega Menu is like the web Mega Menu, a big overlay panel with custom formatting and grouping of the menu options. The RipCurl website uses a mega menu for navigating into sub categories of clothing.

47 Mega Menu The webos version of Facebook uses a megamenu for streamlined navigation, avoiding the extra navigation found in a Springboard pattern. Walmart uses this same pattern in their Android app.

48 Mega Menu Determine your information architecture before choosing the navigation pattern. Choose a more appropriate pattern, like Tabs, if there are only a few major sections in the app.

49 Secondary Navigation Patterns

50 Page Carousel This pattern can be used to quickly navigate a discreet set of pages using the flick gesture. The page Image Carousel indicator (the ios term for the little dots) displays how many pages are in the carousel; flicking displays the next page. All four examples use the page carousel within a selected tab.

51 Page Carousel The page carousel pattern has its limits. Consider using a list for navigating more than eight pages. The page carousel works best for navigating a small number of pages. Use a visual indicator to reflect the number of screens, and current screen. Flick is the common gesture to navigate the carousel.

52 Image Carousel The image carousel may be a 2D carousel or more like the itunes coverflow. IMDB uses the image carousel to surface the most viewed movies. We used it to display featured products in the retail application.

53 Image Carousel The Image Carousel works best for displaying fresh visual content, like articles, products, and photos. Provide visual affordance, either with arrows, partial images or page indicators (dots) that more content can be accessed.

54 Expanding List The Expanding List allows a single screen drill down to reveal more information. Android Gingerbread uses this pattern in the call log. All calls from the same number are collapsed into one row. Tapping the icon expands the list to show the individual instances.

Expanding List This pattern is more common in mobile optimized websites than mobile applications, but can work well in both cases. Take for example the Gap.com mobile site.

55 Expanding List This pattern is more common in mobile optimized websites than mobile applications, but can work well in both cases. Take for example the Gap.com mobile site. The Expanding List is used instead of a Cascading List to disclose all of the Women s clothing categories. The Expanding List pattern works best for progressively disclosing more details or options for an object.

56 Screen Flows Most apps will consist of more than one screen. The transition between these screens is known as a screen flow. Screen flows should be logical and predictable. For example, pressing the back button should take the user to the previous screen, not to another unexpected screen.

57 CommBank App Screen Flow Clouds indicate links to other apps or URLs.

58 Task-centred Design Generally when a user uses an app they want to accomplish a task. There may be several different tasks that users perform with the app. Identifying these tasks can help us to design the application. A sample scenario follows

59 Case study: Bus Timetable App A timetabling app is required for Zied Buslines. What are some of the tasks a user would perform with the app? Hints: What are some common scenarios where a user would need the app? What information does the user have and what do they need to know?

60 Case study: Tasks/Scenarios 1. User wants to get from A to B leaving at a certain time. User needs to be able to find out what buses pass through A and which of those also pass through B. 2. User knows which bus they want to catch at point A, but wants to know what times it will leave. 3. User knows which bus they want to catch and want to find out what times it arrives at B.

61 UI Design In each scenario the user knows at least one bus stop: App could begin with a list of bus stops. User selects bus stop. In each scenario the user also needs to know the buses for the bus stop: Display buses and times for the selected bus stop. Selecting bus displays the timetable for that bus including the time it will arrive at each stop on the journey.

62 Screen flow

63 Screen Design

64 Improvements What could be improved? Company logo and colours Search box for bus stops, bus numbers Tabs down the bottom for more options, such as list of bus numbers. Maps GPS to automatically detect which bus stop you are at

65 Prototyping Use prototyping software for: Representing screen flow Designing layouts Simulating interactions such as links between screens Software: irise Justinmind Prototyper Xcode Codiqa

66 Justinmind Prototyper

67 Xcode Xcode also includes support for storyboards:

68 Codiqa (New CREATOR) For prototyping jquery Mobile apps\sites

69 Summary UI design is an important and vital part of the development process. Final project will require identification of user tasks, screen designs, screen flow, and prototype. A UI Design doesn t require final graphics, the focus is on layout and flow. However, having a look and feel close to the final product can help.

DESIGN PROCESS: REDESIGNING THE 2014 [REDACTED] CONFERENCE APP FOR 2015

DESIGN PROCESS: REDESIGNING THE 2014 [REDACTED] CONFERENCE APP FOR 2015 Preface: The 2014 [REDACTED] Conference application is no longer available in the App Store. The 2015 [REDACTED] Conference App is