Here are the learning objectives that will be assessed in the final exam, along with the overall user-centered design process and its major steps.
At the end of each class, students will be able to…
Class 16 – Wireframing
- Differentiate between: sketch, wireframe, mockup, and prototype
- Explain the utility of each one
- Create sketches by hand and wireframes in Balsamiq
Class 17 – Navigation, Information Architecture
- Explain the 3 questions that navigation must answer at all times
- Apply the 3 questions to critique existing interfaces
- Define “Information Architecture” (IA)
- Recognize and create IAs using different organization logics (task-based, audience-based, topical, life-event, etc.)
- Solve IA problems using card sorting
Class 18 – Homepage design
- Explain the purposes a good homepage needs to fulfill
- Analyze homepages and evaluate how they fulfill these purposes
Class 19 – Writing for the Web; Excise
- Apply content strategy thinking to specific problems
- Apply principles for writing for the web
- Define excise
- Identify examples of excise and propose solutions for removing excise
Class 20 – Typography, color, branding
- Define “style tile” and “mood board” and explain the difference between the two
- Integrate color and typography insights into creating a style tile
Class 21 – Responsive; Cross-channel
- Explain the basics of what CSS is and what can be done with CSS.
- Define responsive design
- Explain the main things to take into consideration when designing responsive UX: layout (number of columns) content hierarchy, navigation; mobile first
- Sketch solutions for responsive design of a site
Class 22 – Accessibility; Interface controls
- Define accessibility and its importance for UX design
- Identify the 4 types of interface controls: selection, imperative, entry, display
- Define the concept of “interface language”
- Select and use controls correctly, respecting the conventions of the interface language they are working in
Class 23 – Usability evaluation- introduction
- List various methods for evaluating UX solutions
- Explain the difference between review/inspection methods and testing methods
- Explain the difference between formative and summative evaluation
- Define cognitive walkthrough and explain how it is conducted
- Explain the difference between cognitive walkthrough and heuristic evaluation
- Conduct cognitive walkthrough
Class 24 – Planning and conducting usability testing
- Define objectives for usability evaluation
- Plan a usability evaluation session (steps, procedures, measures to take)
Class 25 – Reporting the results of usability testing
- Identify a strategy for presenting usability results based on the audience for each report and the audience’s needs
- Decide what data to present and in what order to present it
- Create appropriate graphs and charts for representing the data
This class was focused on how to structure the usability report and how to report usability data.
First and foremost, figure out who your audience is for the report, what they would be looking for, and how to make it easy for them to find what they need in the report.
Other tips worth remembering:
- present absolute numbers, not percentages, when you are dealing with small numbers of participants
- pick the correct graph or chart to represent your data (we did an exercise in class where we discovered the stack bar graph)
- enable quick and easy comparisons across tasks, but also present data for each task
- remember to present and rank-order usability issues in a way that helps developers prioritize their work
Today we learned about a simple and a complex way of doing usability testing.
Simple: ask a human to perform some tasks on your product, observe them, identify what gives them trouble. You can also ask them some questions along the way.
Complex: you take various measures of usability such as time on task, time performance, efficiency, etc. The slides below remind you of the types of metrics and the overall flow of a usability test. I highly recommend Measuring the User Experience for more-in depth information about why and how to collect each metric, and how to analyze and report data for each one.
We began with an overview of research and evaluation methods:
|Not yet learned
- task analysis
- keystroke level modeling
- usability testing
- comparative usability testing
- A/B testing
- multivariate testing
You haven’t done any formal evaluation yet on your early prototype. It’s time to do that! Here are next steps:
- Conduct a cognitive walkthrough on your existing prototype.
- Improve the prototype, but keep it low fidelity. This is prototype v.2
- Create a plan for user feedback and usability testing.
- Get some informal user feedback on v2
- Improve the prototype based on user feedback, and create a high-fidelity prototype v. 3 in Axure or Sketch.
- Conduct formal usability testing on prototype v. 3
- Provide recommendations for moving on from v.3 to working prototype (v.4)
- Document everything and write it up in the last part of the final project, the evaluation report.
We began class with guests who talked about the importance of Web accessibility and provided some tips for making websites accessible to people with disabilities:
- don’t rely on color alone to communicate meaning
- test your color scheme for contrast
- write meaningful alt text for images
- use structural elements for headings, lists, etc.
- do not turn off keyboard navigation
- use large click targets
- write meaningful link text
I cannot share their slides publicly, but you can find them on the CN under the daily plan for Class 22.
We then brought together various interface languages by understanding the underlying grammar of interface controls. The slides I showed in class are below.
- remember the types and controls and their definitions
- follow accepted patterns (speak the language you choose correctly)
The purpose of this class was to become aware of what we need to consider from a UX perspective when we’re planning a user experience that’s responsive – or even more, cross-channel.
Responsive design for the Web – means creating adaptable sites that serve different layout, navigation, and content hierarchy depending on the user’s device. This is done by querying the device first to get info about screen size, then serving the appropriate version.
Cross-channel UX – means creating integrated user experiences that span several channels (e.g. desktop, mobile, phone, in person).
Second, some strategic considerations:
- mobile first – content is the most important thing and you need to plan a hierarchy starting from mobile and expanding to the larger desktop version. This is done by prioritizing and labeling content.
- navigation – avoid very deep, complex hierarchies that can be hard to use on mobile
- information architecture – try to keep it consistent across channels and enable users to move seamlessly across channels
Here are some slides about what UX needs to consider when planning for responsive, prepared by a former TA:
- we learned about customer journey maps, or experience maps and practiced imagining one for a young family moving to Indianapolis, and how they would interact with various city agencies (water, parks) using a desktop portal, a mobile app, and in-person or physical interaction (e.g. unlocking gates to the park).
For more about cross-channel UX, I recommend the book Pervasive Information Architecture by Andrea Resmini. I have some excerpts from that book on the following slides:
These are huge topics and we barely scratched the surface, but that’s because, at the end of the day, it’s not mobile first, or cross-channel first… it’s users first! As long as you know the techniques of user-centered design and the philosophy, you can apply them to more complex situations such as responsive or cross-channel.
You read and practiced in class with 2 tools for bringing together the elements of visual style and presenting them to clients for feedback:
Please be sure to know the definition of each tool and what elements go into each one.