User Experience: Responsive Interfaces

User Experience

Responsive Interfaces

Smart watches. Hand-held gaming consoles. Laptops. Mobile phones. Tablets. Phablets. Wide screen desktops. Head-mounted displays.

Once, when we talked about the web, people thought of networked desktops and laptops. Today, it has evolved into a diverse ecosystem of interconnected, intelligent machines. When designing for the web, we need to create responsive interfaces that adapt to different machines.

At the most practical level, we need to think about how our content will be displayed on screens of different sizes. According to Smashing Magazine, "responsive design" refers to "the approach that suggests that design and development should respond to the user's behavior and environment based on screen size, platform and orientation." Others argue that responsive design is "about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen."

However, we also need to think about the way that devices and content are used by human beings. Is the user typing on a physical keyboard, thumbing a virtual keyboard, or using voice recognition? Can the user swipe, pinch, flick, or spread? Can the user hover? And, most important, will our interface be usable across a range of input conditions?

To earn this badge, you will develop responsive user interface wireframes for one of your favorite sites.

BADGE DELIVERABLES

  1. In order to think strategically about mobile interface design, you will need to work with an existing batch of content. Identify a site that you will use as a guinea pig. This might be a personal site or a site for a student organization. It could also be an existing site that you think could be doing a better job of adapting to mobile platforms. (Perhaps it's the site for a company that you would like to someday work with, and you've noticed that their mobile presence leaves much to be desired).
  2. Research what web designers and usability experts are saying about how to display information on mobile devices, and take notes as you go. Search for *recent* writing about "responsive design." The sources linked at the bottom of the page are a good start, but you will need to dig deeper. As you research the topic, try to find a range of perspectives. Most web developers advocate responsive design, but there are some who challenge conventional wisdom. Keep your eyes peeled for design recommendations and suggested "best practices."
  3. Track down articles about how human beings use mobile devices. Search for phrases such as "mobile interface" and "mobile input" and "mobile gestures." It's important to look for recent writings because manufacturers regularly introduce new ways of interacting with mobile devices. Take notes as you go.
  4. After you've finished your research, create a checklist of responsive interface principles that will influence the design decisions on your wireframes. Keep these principles short and sweet; bullet points are just fine. You might also want to search for other mobile usability checklists to make sure that you have not missed anything.
  5. Pick an important page from the guinea pig site and create wireframes which indicate how the content should be displayed in five different conditions: micro-screens such as those found on Apple Watch (272 pixels), small screens (320 pixels wide), mid-range screens (768 pixels wide), large screens (1280 pixels wide), and extra-large screens (1600 pixels wide).
  6. You should use Balsamiq to create these wireframes. Balsamiq is available on the lab computers, and you can also download a trial copy for use on your own computer. Your wireframes can use ipsum lorum placeholder copy for large chunks of text, but you should include a reasonable amount of specificity for crucial interface elements. For example, instead of labeling an image as "Image," you might label the image as "Photo of Highlighted Dish of the Week." Instead of labeling hyperlinks as "Link | Link | Link" you might label the hyperlinks as "Recipes | Nutrition | Video Tutorials."
  7. After creating the wireframes, you should write a medium-length (750 to 975-word) strategic document that discusses the project context, articulates your responsive interface principles, and explains the wireframes. Include the wireframes as an appendix to your strategic document, labeling each of the wireframes with a descriptive name (e.g. "Figure 1. Recipe page adapted to mobile phone with small screen" or "Figure 2. Recipe page adapted to display characteristics of contemporary laptops").
  8. As always, the strategic document should be written in a professional tone as if you were explaining these responsive interface designs to a colleague or a client. Avoid first-person altogether. After you've finished revising (and proofreading) the document, you should export it as a PDF and upload the document to your folder on the class web server.
  9. Copy the introductory paragraph of the strategic document into your blog posting, and include a link to the finalized PDF. All badge write-ups should be posted to your personal blog. To formally complete the badge assignment, please e-mail me with the subject line "Pending: Responsive Interfaces" and include the link to your blog posting in the e-mail message.

USEFUL RESOURCES

Last Revised: January 3, 2017
Please report problems with this page.