DTC 478 Usability and Interface Design
NOTE: This webpage provides resources for this course. It is NOT the course syllabus and DOES NOT provide information about course assignments, requirements, or expectations. Please consult the course syllabus for these types of questions.
Course Description
DTC 478 Usability and Interface Design focuses on the overlay of design, content, users, and situation in order to promote efficient and effective utilization of desktop and mobile interfaces for various media devices. Interfaces are seen as portals between a variety of users in different of similar situations and collections of digital data or information. Students will conceptualize, critique, analyze, evaluate, and produce usable interfaces for various digital media devices.
Course Goals and Objectives
This course is integral to the overall vision for The Creative Media & Digital Culture Program and so is aligned with the
CMDC Program Goals and Objectives. The specific CMDC program goals this course is intended to meet, as well as the objectives for each, are detailed below.
- Program Goal #1
Demonstrate competency with computers for designing, distributing, retrieving, and preserving digital works in various mediums for effective human-computer interactions.
- Program Goal #2
Synthesize media forms for multimedia contexts
Course assignments and activities reflect and assist students reaching these and other program goals.
Course Focus
Usability and interface design is the study of how we design, build, and then actually use digital interfaces. The desired outcome is the smooth and easy use of such interfaces, not a sense of hopeless frustration when they don't work as designed or desired. Oftentimes, we think of usability as being focused more on the design of a thing. Well-designed things are supposed to work better. But usability is also about assuring that what we build works as intended and in the situation in which it is utilized. So, the nature and extent of situation-centered design and usability built into interfaces, derived from understanding why someone will use an interface and for what purpose will be the focus of this course, and follows the "learn, think, build" focus of The CMDC Program.
Course Structure
This course is envisioned as a series of seminar discussions, collaborative workshops, individual and collaborative course projects, and presentations providing students an environment where they can work through a number of challenges, complete projects, and document their program learning. The following research questions will provide the course context, and its connection with the "learn, think, build" focus of The CMDC Program:
- (LEARN) How do users (ourselves included) respond to interfaces and their design?
- (THINK) What does "usable" mean and how do we assess the usability of interfaces?
- (BUILD) How do we assure usability throughout the design and building process, especially with regard to interfaces built for mobile devices?
Course Texts/Readings
- Hoekman, Robert, Jr. Designing the Obvious: A common sense approach to web & mobile application design
(Berkeley, CA: New Riders Publishing, 2011)
- Krug, Steve. Don't Make Me Think
(Berkeley, CA: New Riders Publishing, 2006)
- Moll, Cameron. Mobile Web Design
A web standards approach for delivering content to mobile devices. Downloads as a .ZIP file.
- Online or downloadable readings as assigned in course syllabus
- Class handout readings as assigned
Course Resources
Usability
- Nielsen, Jakob. Usability 101: Introduction to Usability
How to define usability? How, when, and where can you improve it? Why should you care? This overview answers these basic questions.
- Nielsen, Jakob. "Misconceptions About Usability"
- Pogue, David. "When it comes to tech, simplicity sells"
A video lecture by Pogue, personal technology columnist for the New York Times, takes aim at technology's worst interface-design offenders, and provides encouraging examples of products that get it right.
- The Church of Usability
Six Web usability gurus, including Jakob Nielson, offer advice on improving visitor experience.
- Usability.gov
- UsabilityNet
- Donald Norman's jnd website
- Jakob Nielsen's Alertbox: Current Issues in Web Usability
- Jakob Nielsen's Alertbox Columns
- Rubin, Jeffrey. Handbook of Usability Testing. (1st or 2nd edition)
- "Quality Is Dead #2: The Quality Creation Myth"
Quality is not a thing. It is not built. It cannot be guaranteed. Instead, quality is a wonderful relationship that can be arranged for. Quality, to a large degree, is out of our hands. Excellent thinking and problem solving by the development team can result in favorable conditions in the environment in which a built artifact is used. But, the environment, and its conditions, can change without notice. We must review the status of our product as we go. We must understand what our art can and cannot do. And, we must manage the expectations of our clients and users accordingly. And still, quality is a myth.
- "Factors that Improve Online Experiences"
- The Bad Sign Brigade (Flicker)
- The Complexity of Simplicity
- How A Stray Mouse Click Choked the NYSE & Cost A Bank $150K"
An interesting and informative article about what happens when the User Interface is not considered in the initial design
Activity-Centered Design
- Norman, Donald. "Human-Centered Design Considered Harmful"
Norman notes that products and applications become great not because of a "deep understanding of users, but rather a deep understanding of the activities that were to be performed." Advocates Activity-Centered Design over Human-Centered Design: focusing on the activity, not the user.
- Norman, Donald. "HCD Harmful? A Clarification"
Norman clarifies his thoughts about the problems with Human-Centered Design.
Conceptual Design
Information Design
- Norman, Donald. "Attractive Things Work Better" (Available as .PDF download)
Chapter 1 of Norman's Emotional Design: Why We Love (or Hate) Everyday Things (New York: Basic Books. 2005)
- Norman, Donald. Epilogue, "We're All Designers" (Available as .PDF download)
Epilogue of Norman's Emotional Design: Why We Love (or Hate) Everyday Things (New York: Basic Books. 2005)
- Horn, Robert E. "Information Design: The Emergence of a New Profession." Information Design. Ed. Robert Jacobson. Cambridge, MA: The MIT Press, 200. 15-33.
- Charles and Ray Eames
Charles Eames (1907-1978) and his wife Ray, beginning in 1940 and continuing four decades, were the pioneers of modern information design. They worked in many mediums including puppets, film, and furniture. The Eames chair is still considered the epitome of contemporary, comfortable design. Their most famous contribution to information design was the timeline mural (with its graphic depiction of intersections between space and time) that provided a graphical, linear depiction of some historical or current event with far more information carrying capacity than anything previously produced.
- Erwin, Daniel. "Eames: Paragon of Simplicity" October 2007
Apparently, a paper written by Erwin for his Intro to Design class.
.PDF version available here
- "Powers of Ten"
A short, interactive film by Charles Eames which visualizes the size of the universe, from space to subatomic particles, through a series of "jumps," each 10 times larger, or smaller, than the previous.
- Spot Maps by Dr. John Snow
Spot maps prepared by Dr. John Snow (1813-1858) helped pinpoint the source a of cholera epidemic in London. Map showed London neighborhood overlaid with the location of cholera victim homes and location of nearest pumps for getting water. By examining the map Snow could easily see that most of the deaths occurred near a particular pump. Solution: remove the pump handle so that people could no longer get to this the tainted water.
- 1861 flow map by Charles Jospeh Minard
Charles Joseph Minard (1781-1870) pioneered the use of thematic maps in which he overlaid statistical information on a geographic background. In 1864 he developed the graphical metaphor of a river whose width was proportional to the amount of materials being depicted flowing from one geographic location to another. He is most famous for his "Carte figurative des pertes successives en hommes de l'Armée Française dans la campagne de Russie 1812-1813," a flow map published in 1869 depicting Napoleon Bonaparte's disastrous Russian campaign of 1812. Beginning at the Polish-Russian border, Minard's map used a thick brown band to show the size of Napoleon's army at each geographic position during the march to Moscow. The path of Napoleon's retreat from Moscow, during a bitter winter, is shown by a darker lower band which is tied to temperature and date scales. The map included six dimensions of information: the location of Napoleon's army in longitude and latitude, its direction of travel, its size throughout the campaign (422,000 at start; 10,000 at end), temperature, and dates. Edward R. Tufte says of Minard's map "it may well be the best statistical graphic ever drawn" (The Visual Display of Quantitative Information 40). Minard's map set the standard for graphically depicting flows of people and goods in space.
The concept of the flow map was actually developed earlier, in 1837, by Henry Drury Harness who used them to depict the flow of people and freight in Ireland.
- 1930s Otto Neurath's Isotype
Neurath sought to develop a universal, objective, and neutral pictorial language system that transcended linguistic and cultural barriers. His isotype graphs show amounts by reproducing a single image proportional to that amount. His modern graphic designs sought to promote an International Picture Language and, in fact, provides the basis for much of the visual language and international signage we see and use everyday.
- Several lectures by Donald Norman are available on YouTube. Search for "Donald Norman" and watch a few to get a better sense for Norman's argument: that design is a factor in every aspect of our lives that involves the use of things.
Information Architecture
Navigation
- Nielsen, Jakob. "F-Shaped Pattern for Reading Web Content"
Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe. From Nielsen's Alertbox 17 April 2006.
Search (as a start to navigation)
Accessibility
- Color Deficient Vision
Color is not the same for everyone. Colorblind people will see your web site quite differently than you. Use this resource, and those it links to, to design your webpages for optimum usability by folks with color vision deficiences. Also, see your webpages as if you were colorblind. A very helpful resource.
- WAVE Web Accessibility Evaluation Tool
A useful online tool to aid the accessibility evaluation process. Shows the original page with embedded icons and indicators that reveal the accessibility issues.
- Red Route Usability: The Key User Journeys with Your Web Site
An article offered by UserFocus, a usability consultancy and training company based in London. Lots of articles and resources at their website.
Mockups, Wireframes, and Prototypes (Page Layout and Envisioning Design)
- The Importance of Wireframes In Web Design and 9 Tools To Create Wireframes
Wireframes provide the opportunity to test a web design and determine whether a user can complete specific tasks closely related to achieving her goals and the site's business objectives. Wireframes illustrate the layout of a particular web page, and understanding how they work is key to creating a successful website prototype. Using different shapes (ovals, diamonds, triangles, etc) developers can represent content, as well as functional and navigational elements, and how how everything connects. This article provides an excellent overview, and reviews of nine tools you can use to create wireframes.
- Top Ten Mistakes in Web Design
The ten most egregious offenses against users; the very worst mistakes of Web design. Compiled by usability expert Jakob Nielsen.
- Donald Norman's jnd website
- Norman, Donald. "Simplicity Is Highly Overrated"
- Norman, Donald. Design of Everyday Things, 2002.
- Snyder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. Morgan Kaufman, 2003.
Production
Writing for the screen
Typography
Visual Display of Information
- The Visual Display of Quantitative Information
Edward R. Tufte. Cheshire, CN: Graphics Press, 1983.
- Envisioning Information
Edward R. Tufte. Cheshire, CN: 1990.
- Visual Explanations: Images and Quantities
Edward R. Tufte. Chesire, CN: Graphics Press, 1997.
Coding
- Stackoverflow
A quick computer programming resource in a social media context. Ask a question; get an answer.
Color
Color Blindness
- Color Deficient Vision
Color is not the same for everyone. Colorblind people will see your web site quite differently than you. Use this resource, and those it links to, to design your webpages for optimum usability by folks with color vision deficiences. Also, see your webpages as if you were colorblind. A very helpful resource.
Launch
- Brinck, Tom, et. al. Usability for the Web
Chapter 11, "Pre-Launch and Post-Launch"
Testing / Verification / Debugging
- Five Second Test, a website where you can run five second tests on website or application screens, even remotely. See also "User Interface Engineering" below.
- Lewis, Clayton and John Rieman. "Evaluating The Design Without Users"
Note: Chapter 4 of Lewis' Task-Centered User Interface Design (Shareware, 1993).
- Lewis, Clayton and John Rieman. "Testing The Design With Users"
Note: Chapter 5 of Lewis' Task-Centered User Interface Design (Shareware, 1993).
- Pearrow, Mark. "Heuristic Evaluation." (Available as .PDF download)
Chapter 6 of Pearrow's Web Site Usability Handbook (Charles River Media, 2006)
- Rocket Surgery Made Easy
Steve Krug's follow up to his Don't Make Me Think, this book is, as the subtitle describes, "The Do-It-Yourself Guide to Finding and Fixing Usability Problems." Sample resources are available at this website, including a 25-minute video of a demonstration usability test.
- Rubin, Jeffrey. Handbook of Usability Testing. (New York: John Wiley & Sons, 1994)
- Tangled Webs, The Black Team (Issue 7.6 17 December 2002)
The story of IBM's "Black Team," a group of better than average software testers whose dedication substantially improved the efficiency of the company's software and hardware during the 1960s.
- Testing Bias
A PowerPoint 2008 presentation by Wim Guerdin, Director of Information Technology Services at Washington State University Vancouver. This presentation accompanied his lecture about Testing Biases and how to prevent them. (Downloads as a .PPT file)
- User Interface Engineering's Five-Second Test concept where you open a series of screens in different browser windows, or print them, and then show each one to a user for five seconds each and ask the user to write down everything she saw. See also "Five Second Test" above.
Testing Resources for Websites
Mobile Devices
A key concept is that we are designing NOT for the device or application, but rather for the USER. The user is "mobile," not the device. Mobility is more than just wireless, it suggests an entirely new user experience. Comprehending this experience of consuming, manipulating, and reporting data, and the context in which this experience occurs is central to successfully designing an experience for a mobile user.
Just as important is the defining of "design" as a medium through which communication is conveyed and response is sought. In this sense, design cannot exist without a medium (the mobile telephone), and it is different from art in that design is meant to be functional, to be used for specific purposes, to foster specific communications, or elicit specific responses.
As a result, "mobile design" means the discipline of communicating within an environment of mobility. So, design promotes usability through a deeper understanding of a mobile strategy—
context ("Jane Smith is on the go"),
user experience ("Jane typically consumes and sends content using only one hand", and
focus (How can we serve Jane's needs on the go, while requiring minimal dexterity?"). It's the contextual user task(s) that determine the content, architecture, and user experience of a mobile site, not the existing website.
Design for Mobile Phones
- Agar, Jon. Constant Touch: A Global History of the Mobile Phone.
- Ballard, Barbara. Designing the Mobile User.
- Cerejo, Lyndon. "A User-Centered Approach To Web Design For Mobile Devices"
Focuses on designing the user experience for mobile websites accessed from mobile phones with small screens, though the process can be applied to building apps as well.
- Ito, Mizuko, Daisuke Okabe, and Misa Matsuda. Personal, Portable, Pedestrian: Mobile Phones in Japanese Life.
- Jones, Matt and Gary Marsden. Mobile Interaction Design.
- Passani, Luca. Global Authoring Practices for the Mobile Web
- How to build a website for the iphone with orientation detection | Engage Interactive Blog | Web design Harrogate
- Mobile Web Best Practices 1.0
Developed and published by the Best Practices Working Group, a part of the W3C's Mobile Web Initiative, charged with promoting recommendations for delivering content to mobile devices. A separate validator is available (see below, under "Validators")
- Moll, Cameron. Mobile Web Design: Tips & Techniques
- Showcase of Designs Optimized for iPhone
- Web Design Inspiration for the iPhone
Mobile Application Prototyping
- Keynotopia
A series of templates that promote rapid, high-resolution prototyping for mobile, web, and desktop apps using the Keynote, PowerPoint, or OpenOffice presentation programs. Provides vector user interface component templates for all major mobile telephones and tablets, each fully editable and customizable.
Mobile Application Development Tools
Coding: General
Apple iPhone app development
Consistency
- Opera Mini & Opera Mobile
A browser that aims to provide greater consistency for rendering and browsing experiences across multiple mobile devices
Emulators
- Firefox Web Developer Toolbar
Download and install the appropriate toolbar for your browser version. Open your file and select "Miscellaneous > Small Screen Rendering" to reduce the window width to roughly 260 pixels and reformat the layout and content to simulate rendering by a mobile browser.
Note: You can accomplish the same thing with the Opera browser (see above). Select "View > Small Screens."
- Firefox User Agent Switcher Extension
Useful for emulating a number of mobile phone browsers. You can manually add popular mobile user agent strings from this list. Combined with the Web Developer's Toolbar Small Screen Rendering feature, the User Agent Switcher can provide glimpses of how your content will render in whatever mobile phones you choose.
- iPhoney
A free iPhone simulator currently compatible with only Mac OS X.
Validation: Testing and debugging for mobile phones
