Widgets

Widgets could be understood as "mini apps".

• Widget types
  
  • Information widgets
    
    • To display a few crucial information elements that are important to a user and track how that information changes over time.
    • e.g. weather widgets, clock widgets or sports score trackers.
    • Interaction: touching information widgets launches the associated app and opens a detail view.
  • Collection widgets
    
    • To display multitude elements of the same type, which are collected from an app. Collection widgets can scroll vertically.
    • e.g. a collection of pictures, articles, emails/messages.
    • Interaction: browsing the collection, and opening an element of the collection to its detail view.
  • Control widgets (remote controls)
    
    • To display often used functions that the user can trigger right from the home screen.
    • e.g. music app widgets
    • Interaction: may or may not progress to an associated detail view depending on if the control widget's function generated a data set, such as in the case of a search widget.
  • Hybrid widgets
    
    • Many widgets in reality are hybrids that combine elements of different types.
    • e.g. A music player widget keeps the user informed about what track is currently playing. It essentially combines a control widget with elements of an information widget type.

• Widget limitations
  
  • Gestures
    
    • Touch
    • Vertical swipe
  • Some of the UI building blocks that rely on restricted gestures are not available for widgets.

• Design guideline
  
  • Widget content（內容）
    
    • The widget is the information "snack" while the app is the "meal."
    • As a bottom line, always make sure that your app shows more detail about an information item than what the widget already displays.
  • Widget navigation（導覽）
    
    • Besides the pure information content, providing navigation links to frequently used areas of your app.
    • Generate functions and open application at top level
  • Widget resizing（尺寸）
    
    • Planning a resize strategy for your widget depends on the type of widget you're creating.
    • List or grid-based collection widgets are usually straightforward while information widgets require hands-on planning to make all content fit within a given size.
  • Layout considerations（版面）
    
    • Be flexible and accommodated
    • Planning your widget resizing strategy across "size buckets" rather than variable grid dimensions.
  • Widget configuration（設置）
    
    • Keep the widget configuration light and don't present more than 2-3 configuration elements.
    • Use dialog-style instead of full-screen activities and retain the user's context of place.
    • Android widgets do not show a "Setup" or "Configuration" button.

Checklist

• Focus on small portions of glanceable information on your widget. Expand on the information in your app.
• Choose the right widget type for your purpose.
• For resizable widgets, plan how the content for your widget should adapt to different sizes.
• Make your widget orientation and device independent by ensuring that the layout is capable of stretching and contracting.

App Structure

• Top Level views
  
  • The layout should be an equally rewarding experience for new and frequent visitors alike.
    "What are my typical users most likely going to want to do in my app?"
  • Put content forward: Choose layouts that are visually engaging and appropriate for the data type and screen size.
  • Set up action bars for consistent navigation and actions:
    
    • Use the action bar to display your app's icon or title
    • Navigation supports switching multiple views
      
      • Fixed tabs: views switching frequently, limited numbers, aware of the alternate views
      • Spinners (drop-down menu): views switching between the same data set or those of the same type
      • Navigation drawers (slide-out menu): suitable for complex apps, a large number of top-level views, direct access
    • Consider making the content creation accessible right from the top level.
    • Include the Search action in the action bar
• Categories views
  
  • Use tabs to combine category selection and data display: Scrolling tabs for closely related data, but no more than 5-7 tabs; fixed tabs for unrelated data.
  • Allow cutting through hierarchies
  • Acting upon multiple data items
• Detail/edit view
  
  • Make navigation between detail views efficient, e.g. swipe views, thumbnail view controls

Checklist

• Find ways to display useful content on your start screen.
• Use action bars to provide consistent navigation.
• Keep your hierarchies shallow by using horizontal navigation and shortcuts.
• Use multi-select to allow the user to act on collections of data.
• Allow for quick navigation between detail items with swipe views.

Responsive typography

Interaction design is engineering: it's not about finding the perfect design, it's finding the best compromise, which means it requires you to think about compromises between visual design and technology from the very beginning.

The content matters

• The content and the language used has a big impact on how our typography will work. Oliver Reichenstein also states that different font sizes and contents have different influences on our ways of writing, editing and reading.
• Typography for the web should design inside the browser with the project's real content.

Typeface

• Choose the typeface fits the right tone (based on the real content) of the website.
• The size of the body text depends on reading distance, and reading distance varies depending on the device used or held.

Line height

• 140% is a good benchmark for line height but it also depends on the typeface you use.
• Use tighter leading in a narrower paragraph, and looser in a wider one.

To take reading distance into account, the smaller the screen size it is, the smaller the type size and tighter the line height should adopt, so that the perceived size is more or less the same as on all devices.

Additional tips

• Always use non-breaking spaces( ) in expressions in which figures and abbreviations are separated by a space (e.g. 20 kg, 4:00 pm).
• Try to keep the line length between 45-75 characters per line.

Useful tools

• Web Font Specimen, Typecast app (14-day trial) and Typekit’s font browser.
• For testing: Resizer Safari Extension

Source: Responsive Typography: The Basics by Oliver Reichenstein, Prototyping Responsive Typography by Viljami Salminen.

The UX design process and methods

Research and understanding
Define the problem Create a focus question as the initial direction. Collect the facts of business requirements and user needs through: Read prior reports, speak to the people who deal with customers, and survey and classify the customer calls. Careful observation - be aware of these details. Interviews: start to conduct interviews and tips for interviewers. Produce useful documents to help with design thinking Rich pictures, design the box Personas, scenarios and stories should include the targeted user's primary goals, workflow, mental models, tools, working environments, and terminologies. Red routes / core and path / main user journeys: Function familiarity test
Design
Generate dozens of ideas or paper interfaces Develop interactive paper prototype Test the prototypes quickly, iterate on the ones that have value, evaluate and combine the best parts into a converged solution: open card sorting, tree test, trigger word elicitation, swap sort and online card sorting, cognitive walkthrough, word list. Electronic prototype: using one tool throughout. Iterative process
Evaluation throughout the design process
Qualitative and quantitative data Collect qualitative data to identify usability problems, then use quantitative survey to make predictions and measure the usability of a system Word list Can be both qualitative (circle words from a checklist of adjectives) and quantitative (Use word cloud or count the positive/negative comments). Card sorting Tree test, function familiarity test Cognitive walkthrough A happy path and 4 questions interview to identify usability problems. Usability testing software: Morae, Silverback Questionnaires: AttrakDiff Create and present a clear series of next steps

Build a responsive site

Image source: Responsive workflow, but note that the order might not be this linear in reality.

Responsive typography and units
Responsive typography Text design: produce a page that contains all the major HTML elements and a basic CSS style, so that everything will be covered. Have three distinct heading styles, rather than ten with subtle variation. Start with the <body> element body { font: 100%/1.5 serif; /* equates to 16px in most browsers */ padding: 1em 20%; /* stop content from bumping up against the edges of the browser */ } The measurements, em & %, are relative to computed font size of its parent. Use ems to size typography and vertical measurements, and percentages for layout and horizontal measurements. target / context = result h1 { font-size: 1.75em; /* 28 / 16 = 1.75 */ line-height:1.1428; /* 32 / 28 = 1.1428 */ /* Don’t need to declare a unit for the line-height property. */ }
Responsive images and video
Considering performance and image optimisation, Responsive Enhance technique would be a solution, a combination of JavaScript and two different-sized images: https://github.com/joshje/Responsive-Enhance Use a <div> container around <iframe> to embed a video. Set the position of <div> as absolute and padding-bottom: 56.25%, so the wrapper box can keep the ratio 16:9: http://alistapart.com/article/creating-intrinsic-ratios-for-video
Media queries
Design various breakpoints: think first in terms of device classes, not specific devices. I prefer to let the actual content and images in the browser at the same time as making adjustments in response to the screen size.  Add <meta name="viewport" content="initial-scale=1.0, width=device-width"/> between <head> tag. This tells browsers that a website shouldn’t be squashed down to fit on a small screen, and that the width of the browser window should be treated the same as the overall device width. Adopt em-based media queries. Not only will our website adapt based on the size of the viewport, but the size of the font too. To make media queries work for ie, here are the solutions: Apply JavaScript http://code.google.com/p/css3-mediaqueries-js/ https://github.com/scottjehl/Respond or Exclude lower versions <!-- [if lt IE 9]&(!IEMobile)> /* lower than IE9 and exclude IEMobile */ <![endif]-->

Finally,
Test multiple devices, network speeds and in the wild.

(Resources: Build a responsive site in a week:
Part 1, Part 2 (typography and grids), Part 3 (images and video), Part 4 (media queries), Part 5, Responsive workflow)

The powerful cards

Remember: card sorting is not a user interface design method, but a knowledge elicitation exercise to discover users' mental models. It has to make users work harder and really think about how they'd approach the concepts written on the cards.
- Card Sorting: Pushing Users Beyond Terminology Matches

Exploratory card sorting

• Purpose: to find out how your users classify the information in your domain.
• Steps of open card sorting:
  
  1. 30-100 cards (with a title and a short description).
  2. Ask around 15 users to sort the cards into groups.
  3. Users give each group a description of what makes the group a group.
  4. Analyse the data. The terms people use to describe the groups will become the proto-headings of the navigation structure.

A title of the function
A short description
x 30-100 cards

Users: sort the cards into groups

Users give each group a description

Tree test

• Purpose: to check if people can actually find stuff in your navigation structure.
• Steps:
  
  1. 10-20 task cards (with a short description of a likely goal/task that the web site supports)
  2. Prepare a set of group headings, derived from an open card sort.
  3. Write down the sub-groups on the back of each card.
  4. Ask users to pick the group card and then the sub-group card while given the task cards.

"Find an exercise bike"
x 10-20 cards

+

(front)
Sports & Leisure

(back)
Fitness

(back)
Camping & Hiking

(back)
Cycling

Users: pick the group card and then the sub-group card

Trigger word elicitation

• Purpose: to identify the words or phrases that will encourage users to click on links.
• Steps:
  
  1. 10-20 task cards (with a short description of a likely goal/task that the web site supports)
  2. Ask users the words or phrases they would expect to find on a web site that supported that task.

Web broad

• Purpose: to find out where users expect to find your functions.

Function familiarity test

• Purpose: to gauge how often people use functions within your application, or to measure levels of understanding.
• Steps:
  
  1. Cards contain a title of the function and a short description.
  2. Ask users to sort the cards into three piles: functions I use frequently; functions I use sometimes; and functions I rarely or never use.
  3. Give points and add up the scores derived from all participants to identify the most used functions in your interface.

A title of a function
A short description

sort the cards into three piles

Functions I use frequently
5 points

Functions I use sometimes
2 points

Functions I rarely or never use
0 points

Swap sort

• Purpose: to find out the most important functions, features or tasks within your interface. This information would help you know how to priortise content.
• Steps:
  
  1. Cards contain a title of the function, feature or task and a short description of it.
  2. Ask users to pick the 10 most important cards of them.
  3. Ask users to place the 10 card vertically and rank them in descending order of importance.
  4. Give points from 10 to 1 and add up the scores derived form all participants to identify the most important functions in your interface.

(Source: Card Games for Information Architects by David Travis)

Vision comes first

A user experience vision gives

• direction, where the design priorities lie.
• challenge inspires and excites people; brings inspirational sparkles.
• focus

How to create a user experience vision - "design the box" or "working backwards"

• Design the packaging of the "product" and agree on the most important message.
• After 30 minutes or so, each team presents their box to the larger group for 2 minutes.
• The purpose is to discuss the findings and reach a consensus.

How to refine the vision and present it to non-designers

• Tell a story: personas and scenarios, which captures the winning idea.
• Draw a picture: storyboards

(Source: Why you need a user experience vision (and how to create and publicise it) by David Travis)