application development process -...
TRANSCRIPT
Overview
• Good/Bad UI Design
• Interaction Design Principles
• Screen layouts
• Navigation Patterns
• Screen Flows
• Prototyping
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
Good UI Design
• Good UI Design:
• Aesthetically pleasing
• Familiar
• Logical
• Functional
• Efficient
Interaction Design Principles
• Learnability
• Efficiency
• Memorability
• Error Recovery
• Simplicity
• Mapping
• Visibility
• Feedback
• Consistency
• Satisfaction
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.
Efficiency
• Number of steps it takes
for a user to complete a
task.
• Key tasks should be made
as efficient as possible.
Memorability
• Interface should be easier
to use each time the user
interacts with it.
• Frequency of use is the key
factor in memorability.
Simplicity
• Usual tasks should be easy and
less common tasks should be
possible.
• Avoid unnecessary
functionality and keep the
visual design and layout
uncluttered.
Mapping
• What the user expects to happen when they interact with the user interface is exactly what should happen.
Visibility
• Important information
should be the most visible.
• Less important information
should be less visible.
• Understanding the users’
goals is critical.
Consistency
• Like-items should always be
displayed and act the same
way across the entire
application (and even
between applications).
• UI standards.
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.
What makes good Navigation?
•Primary navigation patterns:• Springboard• List Menu• Tab Menu•Gallery•Dashboard •Metaphor•Mega Menu
Springboard
• The Springboard pattern is OS neutral, working equally well across devices. • It is also
sometimes referred to as a Launchpad.
Springboard
• The Springboard is characterized by a landing page of menu options that act as a jumping off point into the application.
Springboard
• Facebook followed the Springboard design of the iOS home screen, and they were quickly emulated by other applications.
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.
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.
List Menu
• The List Menu is similar to that Springboard in that each is a jumping off point into the application.
List Menu
• There are numerous variations of this pattern including personalized list menus, grouped lists, and enhanced lists.
List Menu
• Enhanced lists are simple List Menus with additional features for searching, browsing or filtering.
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.”
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.
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.
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.
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.
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.
Gallery
• Sometimes the content will be easier to browse if it is grouped.
•Dwell use side tabs to organize gallery content into manageable chunks.
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.
Metaphor
• This pattern is characterized by a landing page modeled to reflect the application’s metaphor.
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.
Metaphor
Use the Metaphor pattern judiciously, as a poorly implemented metaphor can look a lot like the Novel Notion anti-pattern .
Mega Menu
•A mobile Mega Menu islike the web Mega Menu, a big overlay panel withcustom formatting and grouping of the menu options.
• The RipCurl website uses a mega menu for navigatinginto sub categories of clothing.
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.
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.
Page Carousel
• This pattern can be used to quickly navigate a discreet set of pages using the flick gesture.
• The page Image Carouselindicator (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.
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.
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.
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.
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. 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.
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.
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…
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?
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.
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.
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
Prototyping
•Use prototyping software for:• Representing screen flow• Designing layouts• Simulating interactions such as links between screens
• Software:• iRise• Justinmind Prototyper• Xcode• Codiqa
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.