DTC 478 UX-UI Design

Usability and interface design

DTC 478 UX and UI Design

DTC 478 Usability (UX) and Interface (UI) Design focuses on the overlay of design, content, users, and situation in order to promote efficient and effective utilization of screen-based interfaces. "Interface" is a portal, a potential for interaction, between users and collections of information. One form of "Design" is functional, how something works rather than how it looks. The effective functionality of a designed interface is called "usability." Students will learn to conceptualize, critique, analyze, evaluate, and design usable interfaces for various digital media devices and purposes. See Background and other menu tabs below to learn more. Or, go directly to the Course Schedule. It provides information and resources for every class meeting. Taught: 2009-present.

General Course Information

Background

What?
DTC 478 Usability and Interface Design considers users, content, situation, and design (visual and conceptual) in order to promote efficient and effective creation and utilization of digital interfaces.

Why?
Interfaces promote interaction between users and information. Good interface design promotes usability, the ability to solve problems, achieve goals, and accomplish tasks. Good usability and interface design empowers users. Bad usability and interface design frustrates users. LEARN more.

How?
You will learn to conceptualize, design, and critique interfaces that promote efficient and effective usability. LEARN more about how this will work by selecting the "Framework" menu tab, above.

Course Structure

Course activities include lectures, discussions, collaborative workshops, individual and collaborative course projects, and presentations. We will read and discuss theoretical approaches and apply them to practice. The goal is to provide you a born digital sensibility and a keen focus on interdisciplinarity. We can further articulate this approach through these Ten Guiding Principles: CMDC Primer.

Course Rationale

Usability is often considered the style of an interface, its aesthetic and visual appeal. Well-styled (good looking) interfaces are thought to work better. But, usability and interface design is about how something works, rather than how it looks. The research questions below guide the "Learn. Think. Build." course rationale.

(LEARN) How do users (ourselves included) respond to interfaces and their design? What new / changed considerations emerge when we consider design for effective utilization rather than aesthetic, visual appearance?

(THINK) How do we design and assess the usability of interfaces? How do best practices of designing for usability adapt to changing interfaces promoted by converging digital media platforms and devices?

(BUILD) How do we assure usability throughout the design and building process? How might awareness of usability influence our future approaches to conceptualizing, building, and critiquing interfaces?

Ethics, Inclusion, and Being Nice

This course and its instructor seek to offer a safe, respectful, friendly, and collegial community for the benefit of all participants, and for the advancement of the interests that bring us together. As part of this community, we agree that we all will . . .

  • Welcome and encourage intellectual discussion and debate on issues impacting both our classroom community and the broader communities of the University and beyond.
  • Affirm that our life and personal choices and identities may be different from others, but we also intersect in many ways.
  • Respect the differences the comprise our communities.
  • Commit to conduct our interactions free from harassment and/or oppression, including but not limited to restrictions on free expression, discrimination against any person on the basis of race, color, sex, religion, national origin, age, sexual orientation, disability, gender identity or expression, marital status, genetic predisposition or carrier status, military status, and beyond.
  • Recognize that sexual harassment (including, but not limited to, unwelcome sexual advances, requests for sexual favours, or other verbal or physical conduct of a sexual nature) is a specific type of discriminatory harassment and is abuse.
  • Resolve, collectively and individually, not to use sexually, racially, transphobic, or ableist derogatory or demeaning language or imagery in course events and/or activities.
  • Refuse to tolerate harassment and/or abuse of or by community members in any form.
Close

Framework

DTC 478 Usability and Interface Design focuses on Interface, Design, and Usability. See explanations of these terms, below.

Interface > What it does
  • An interface might be a website, blog, information portal, device, or program.
  • An interface promotes interaction between users and information.
  • An interface helps users solve problems, achieve goals, accomplish tasks.
  • Interfaces offer and/or promote affordances rather than specific action.
  • Interfaces anticipate complexity (the relation between conception and execution) to allow room for user interpretation.
  • Interfaces strive for the ambiguity of multiple users.
Design > Two kinds
  • Graphic or visual design is concerned with aesthetics or appearances, how the interface looks. Let's call this "design" (with quotation marks).
  • Conceptual design is concerned with functional affordances, ways to accomplish tasks or achieve goals, how the interface works. Let's call this design (without quotation marks).
"Design" vs. Design

This course focuses on design (no quotation marks), conceptual design, how an interface works rather than how it looks. This is not to say that "design" (with quotation marks; aesthetic, visual, or graphic design) is not important. It is, of course, but this focus on design (conceptual design) champions efficient and effective interface design as a medium through which communication is conveyed and response is sought to promote usability.

For many, this will be a difficult shift. After all, we are immersed in the cultural visual spectacle, and based on what you have learned and practiced in other classes, you may consider yourself a graphic or visual artist. But visual, graphic, or aesthetic design is only styling if it does not promote usability. See Design Council: Design vs. styling.

So, rather than graphic or visual "design" we will focus on conceptual design to plan, create, and critique usable interfaces.

Usability

Usability is a measure of how efficiently and effectively users can solve a problem, achieve a goal, and/or accomplish a task using a particular interface. As usability and interface designers we must consider the overlay of purpose, audience, content, and situation before beginning to design interfaces. Remember, the effectiveness of our design will not be how an interface looks, but how it works with regard to its target audience and purpose. A formulaic way of remembering these relationships is (Purpose+Audience) + UX/UI Design = Usability.

UX/UI Design

Usability (UX, for User eXperience) and Interface (UI, for User Interface) design is the study and practice of designing and building efficient and effective interfaces. Good UX/UI design empowers users. Bad UX/UI design frustrates users.

This necessary focus on "users" will also be a challenge as we are no longer designing (or "designing") for ourselves, and what we think best, but rather someone else who has specific needs and desires for interaction with interfaces. As UX/UI designers, our best path to success is to focus on the user, design for the user, not ourselves.

Close

Learning Goals

This course is aligned with my Personal Teaching Goals, several CMDC Program Learning Goals (NOTE: There will be a test in your Senior Seminar course about how you connected to each of these ten goals.), the CMDC Program Five Standards of Excellence, and several WSU Learning Goals.

Close

Evaluations

Feedback

Student Evaluations > Spring 2020

OVERALL
  • I enjoyed my time in your class as I got to learn a lot about website development and UI design.
  • Out of my six years of attending college, Dr.Barber is my favorite. He is so passionate about learning and such a kind person. He is epitome of an amazing college professor.

RESPONSE: Following Spring Break 2020 the entire university pivoted to online classes. It was stressful, challenging, and chaotic. I did not press students for evaluations. But these were especially gratifying. Thank you, everyone, who rose to the challenges this semester.

INSTRUCTOR STRENGTHS
  • Dr.Barber is truly passionate about the material and because of that I was able to learn an incredible about from this class.
  • He is a very good instructor. Cares about his students, and treats their ideas and answers with respect. He was very insightful as an instructor.
  • He knows his stuff and is passionate that his students get as much out of the class as possible.
INSTRUCTOR IMPROVEMENTS
  • Sometimes the required reading was to much. Maybe it was because our class was once a week but I would have liked to have seen more resources other than readings from the texts.
  • I don't have any thing that would help Dr. Barber improve his teaching.
  • Nothing, keep being you Dr. Barber.
COURSE DID/DID NOT HELP YOU LEARN
  • The assigned material catered to all forms of learning and that is something that more professors need to learn from. Just reading from a text book is not my most effective learning style but i was able to listen to podcasts and watch videos that helped me grasp the required learning material.
  • The readings, videos and audio sources you gave were much appreciated.
STUDENT IMPROVEMENTS
  • I could have spent more time on studying for the little quizzes that the instructor had for each class.
  • Perhaps extra attention to detail for the projects.
HALL OF FAME

Please excuse my possibly flippant wording here, but I find the schedule posted on your website to be rather confusing at times because I personally have difficulty reading. Something about the plain nature of the text befuddles me.
— Spring 2017

Close

Course Texts > Required

◊ Hoekman, Robert, Jr. Designing the Obvious (Second Edition. New Riders Publishing, 2011).
Available: Course Basecamp > Docs & Files > Course Texts

◊ Krug, Steve. Don't Make Me Think, Revisited (Third Edition. New Riders Publishing, 2014).
Available: Course Basecamp > Docs & Files > Course Texts

Close

Schedule Fall 2021

M, 1:30-4:10 PM, VMMC 111, using Basecamp, Slack, Zoom, and this website

NOTE: This schedule could change. Check here for updates.

Updated class schedule.

Week 1, Mon., 23 Aug. 2021 > Course and Usability Introduction

To Do This Week

◊ Attend class.
◊ Get information about grades, texts, etc.
◊ Download PDF of Hoekman, Robert, Jr. Designing the Obvious (Second Edition. New Riders Publishing, 2011).
Available: Course Basecamp
◊ Download PDF of Krug, Steve. Don't Make Me Think, Revisited (Third Edition. New Riders Publishing, 2014).
Available: Course Basecamp
◊ Start thinking about "design" versus design.

Close

Part 1 > Overview > Course

Usability
WHAT?

This week's focus is on USABILITY and INTERFACE DESIGN.
Design is functional, how something works rather than how it looks.
Interface is a portal, a potential for interaction, between users and collections of information.
Usability is the effective functionality of a designed interface.

Learning goals include
◊ Learn how users (ourselves included) respond to interfaces and their design. What new / changed considerations emerge when we consider design for effective utilization rather than aesthetic, visual appearance?
◊ Learn to conceptualize, design, and evaluate usable interfaces for various digital media devices and/or purposes. How do best practices of designing for usability adapt to changing interfaces promoted by converging digital media platforms and devices?
◊ Build usability throughout the creative process. How might awareness of usability influence our future approaches to conceptualizing, building, and critiquing interfaces?

See "Framework" menu tab (above) for more information.

SO WHAT?

Usability is often considered the style of an interface, its aesthetic and visual appeal. Well-styled (good looking) interfaces are thought to work better. But, more than how an interface looks, usability is about whether that interface can be used for its intended purpose without difficulty and/or frustration. The most effective interfaces are not always visually pleasing, but they work wonderfully to fulfill users' needs and help them accomplish tasks and goals. In addition to making a digital interface look good, we need to make it work well.

Close

Mon., 23 Aug., Part 1 > Usability > Course Introduction

Dr. John Barber introduces usability and interface design with a shocking statement: "They are not just for geeks and nerds." He talks about course details, logistics, expectations, and more. He introduces some key course components. LEARN more at course Basecamp.

Close

Mon., 23 Aug. Part 2 > Usability > UX, UI, IA, and Visual Design

Dr. John welcomes Jakob Nielsen who defines key usability concepts and answers basic questions. How to define usability? How, when, and where to improve it? Why should you care? Dr. John introduces a universal theme for the course: Complexity = power, but complexity also = an obstacle for usability. How to tread the fine line between usability and power? LEARN more at course Basecamp.

Close

Resources

See course Basecamp.

Close

Week 2, Mon., 30 Aug. 2021 > User Requirements

To Do This Week

◊ Attend class.
◊ Start Project #1.

Close

Overview > User Requirements

User Experience

WHAT?

This week's focus is on USER REQUIREMENTS. Understanding what users want and need from interfaces, rather than what developers think best to provide, is an important first step toward usability and user experience interface design. But, like anything good, understanding user requirements can be difficult. Stakeholders may resist change and innovation, and users may not know in advance what they want from a future interface. Still, benefits may include increased productivity, enhanced quality of work, cost reductions, and improved user satisfaction. So, investigating and analyzing user requirements is worth the time and effort. Learning goals include
◊ Understand the role of user requirements in effective usability and interface design
◊ Understand that effective user centered design is based on collecting and analyzing data about the intended users.

SO WHAT?

A consistent theme throughout this course is Audience + Purpose = Design. It is tempting to first design how the interface looks, and expect the users to figure out how it works. However, as usability, user experience, and interface designers we know that design (conceptual design) follows after we learn as much as possible about who will use the interface, why, and for what purpose(s). How something works, conceptual design, is often invisible. Once we figure out how something is to work effectively, we can address its aesthetic components. Designing for users' needs and practices is the smart move to provide effective and efficient usability and user experience.

Close

Mon., 30 Aug., Part 1 > User Requirements > Theory

Dr. John says, "Usability is about the user. Neither the client nor the designer is the user, therefore, neither should drive interface design." Steve Krug explains how we really use the Web. Roman Mars talks about how many things are designed for men, excluding women, half the population. And User Requirements Analysis. All foundation and important considerations for usability and interface design. LEARN more at course Basecamp.

Close

Mon., 30 Aug., Part 2 > User Requirements > Practice

Dr. John welcomes Katie Sherman and Roman Mars who talk about the importance of design in providing delightful user experiences. As Mars says, even something as simple as a toothbrush incorporates an incredible number of design details that come from careful consideration of how someone will use the thing we are designing. First readings from Steve Krug and Robert Hoekman, and an exercise to prepare for a homework assignment. LEARN more at course Basecamp.

Close

Resources

See course Basecamp.

Close

Project #1 > Website Audience Analysis

Challenge

Demonstrate your knowledge of the important, and essential, link between audience and conceptual design of any interface. LEARN more at course Basecamp.

Close

Week 3, Mon., 6 Sep. 2021 > Psychology of Design (Theory and Practice)

To Do This Week

◊ Attend class.
◊ Submit Project #1.
◊ Start Project #2.

Close

Overview > User Experience Design

Norman Door

WHAT?

This mweek's focus is on USER EXPERIENCE DESIGN. Often abbreviated UX, UXD, UED or XD, user experience design is the process of enhancing user satisfaction with an object by improving the usability, accessibility, and pleasure provided in the interaction with that object. Learning goals include
◊ Ability to describe User Experience Design
◊ Ability to explain the differences in user experiences
◊ Ability to draw on real world implications of UX design
◊ Understand key principle of user centered design: meet users' needs and promote efficient use
◊ Understand the role of psychology in usability and interface design.

SO WHAT?

If the user ain't happy, ain't nobody happy! —Anonymous, but legendary, UX designer

Usability is not how something looks, it is about how something works. — Steve Jobs

A "Norman door" is recognition of the lack of attention paid by the maker to the user.

Close

Mon., 6 Sep., Part 1 > Psychology of Design > Theory

University Holiday. NO CLASS!

Dr. John welcomes Donald Norman who talks about psychology of design. Is it true that we love (or hate) everyday things? Do we want things that make our lives they way we wish they were? Knowing the answers means we have to know something of user psychology. LEARN more at course Basecamp.

Close

Mon., 6 Sep., Part 2 > User Experience Design > Practice

University Holiday. NO CLASS!

Dr. John talks about user experience design as practice. Robert Hoekman, Brett Snaidero, Robert Mening, and Roman Mars join the discussion with thoughts about careful and considered design. LEARN more at course Basecamp.

Close

Resources

See course Basecamp.

Close

Project #2 > Bad Door Report

Challenge

Identify and consider an example of bad design in your life. What can you do about this bad design? Adjust, ignore, or fix? In thinking about how bad design factors in your life, consider how something you design badly might affect others. LEARN more at course Basecamp.

Close

Week 4, Mon., 13 Sep. 2021 > "Design" vs. Design

To Do This Week

◊ Attend class.
◊ Submit Project #2.
◊ Start Project #3.

Close

Overview > "Design" vs. Design

Design vs. Design

WHAT?

This week's focus is on "DESIGN" vs. DESIGN, a consistent theme throughout this course. By "Design" (with quote marks) I mean the way something looks, its visual, graphic, aesthetic design. This approach should be familiar from other DTC classes. By Design (no quotes), I mean the way someting works to support the user achieving a specific purpose, solve a task, achieve a goal, or fill a need. In this course, we are more concerned with the way an interface works, than the way it looks.

Successful interface design (no quotes), is purposeful, and results from a lot of thought about the interface and its eventual use by intended users, or others. This involves a delicate, if not artificial balance between "Design" and Design. Learning goals include
◊ Appreciate the importance of a conceptual framework, a series of interconnected decisions made at the outset and carried through all phases of a project
◊ Understand that the ease and success of interaction is determined, in large part, by the conceptual design of the interface
◊ Appreciate that inaccurate conceptual design, bad implementation, poor choice of technologies, poor deployment and maintenance = poor usability

SO WHAT?

We understand from Steve Krug that users scan our interfaces, muddle through them, hoping to find something that will satisfice their immediate needs. As interface designers, we must help users find what they seek, understand how our interface can help, and feel smarter as a result. The interfaces we build must be really good billboards that quickly, efficiently, and effectively communicate information and provide help to users.

Close

Mon., 13 Sep., Part 1 > "Design" vs. Design > Theory

Dr. John talks about "Design" vs. Design as theory. Guests Robert Hoekman and Will Shandling talk about building only the necessary interface and three different kinds of design. Andrew Dillon shares his maxim: "To err is human, to forgive is design." LEARN more at course Basecamp.

Close

Mon., 13 Sep., Part 2 > "Design" vs. Design > Practice

Dr. John talks about "Design" vs. Design as practice. He is joined by Robert Hoekman, Steve Krug, and Roman Mars. Dr. John introduces his famous "Billboard Design=CRAP." LEARN more at course Basecamp.

Close

Resources

See course Basecamp.

Close

Project #3: Billboard Design for CMDC Program

Challenge

Design a specific message, for a specific audience, using a specific interface. Remember "Audience+Purpose=Design." LEARN more at course Basecamp.

Close

Week 5, Mon., 20 Sep. 2021 > Architecture and Navigation

To Do This Week

◊ Attend class.
◊ Submit Project #3.
◊ Start Project #4.

Close

Overview > Information Hierarchy, Architecture, Design, and Navigation

Information Architecture

WHAT?

This week's focus is on INFORMATION HIERARCHY, ARCHITECTURE, and DESIGN. Some information is more important. Or, we want to make it seem so. "Hierarchy" deals with which information is presented first, or at the top. "Architecture" is the arrangement of information so to promote usability. "Design" is the conceptual framework surrounding and guiding our choices. Learning goals include
◊ Understand information hierarchy as a tool for guiding the reader's eye to whatever is most important.
◊ Understand information architecture as a mode of organization.
◊ Understand information design as a framework for how, and for what purpose, we present information to users.
◊ Understand how information hierarchy, architecture, and design relate to usability and user experience.

SO WHAT?

We deal with A LOT of information, everyday, all the time. Arguably, this is too much information, information overload. On the other hand, maybe the problem is bad organization of the information we deal with. Deciding which information is more important (hierarchy), how to organize information presented (architecture), and the overarching conceptual framework for our efforts (design) are important considerations for UX/UI designers as users will be interacting with information through the interfaces we design.

Close

Mon. 20 Sep., Part 1 > Information Hierarchy, Architecture, and Design

Dr. John introduces inforamtion hierarchy, architecture, and design using The Feltron Report. It is a lot more interesting than it sounds. A bonus feature is an adaptation of Star Wars Episode IV in the style of an infographic, a visualization of complex information. LEARN more at course Basecamp.

Close

Mon. 20 Sep., Part 2 > Navigation

Dr. John talks navigation with guests Jakob Nielsen and Jeff Sauro. Nielsen says users look at content, not navigation features. Sauro says "website navigation is at the heart of good findability." It's a lively debate. Join the fun. LEARN more at course Basecamp.

Close

Resources

See course Basecamp.

Close

Project #4 > Outline A Portion of the Lings Cars Information Structure

Challenge

Consider how information structure and navigation can create a more usable website. LEARN more at course Basecamp.

Close

Week 6, Tue., 27 Sep. 2021 > Findability and Mapping

To Do This Week

◊ Attend class.
◊ Submit Project #4.
◊ Start Project #5.

Close

Overview > Findability and Mapping

WHAT?

This week's focus is on FINDABILITY and MAPPING. Learning goals include
◊ Defining and understanding "findability."
◊ Defining and understanding "mapping."
◊ Defining and understanding "information architecture."

SO WHAT?

Users visit and use the interfaces that we build for their own purposes: because they need information, they want to solve problems, they want to accomplish as task. Helping users find what they need to do what they want is, thus, very important for usability and interface design.

Close

Mon., 27 Sep., Part 1 > Findability and Mapping

Dr. John welcomes both Steve Krug and Robert Hoekman who talk about finability and mapping. Kara Pernice from the Neilsen Norman Group introduces the F-Shaped Reading Pattern and tells what it means for UX/UI designers. The theme is knowing how users might navigate can help determine information architecture and navigation design to promote usability. One desired result is to teach users how to navigate and use your interface without actually teaching them. LEARN more at course Basecamp.

Close

Mon., 27 Sep., Part 2 > University Holiday. ***NO CLASS***

Findability and Mapping . . . Dr. John talks welcomes Google engineer Matt Cutts who talks about search, and Scott Berkun who talks about the myth of discoverability. The discussion continues about finability and mapping. Join the fun. LEARN more at course Basecamp.

Close

Resources

See course Basecamp.

Close

Project #5 > F-Shaped Reading Pattern: Three Examples

Challenge

Select three websites you think utilize the F-shaped reading pattern. For each website, discuss how the F-shaped reading pattern introduces and teaches the user how to best utilize the website. LEARN more at course Basecamp.

Close

Week 7, Mon., 4 Oct. 2021 > Wireframes and Prototypes

To Do This Week

◊ Attend class.
◊ Submit Project #5.
◊ Start Project #6.

Close

Overview > Wireframes and Prototypes

Prototype

WHAT?

This week's focus is on WIREFRAMES and PROTOTYPES. Wireframes are like skeletons. They show basic layout/features. They are often simple black, white, and/or gray renditions. Wireframes are NOT about design (composition, layout, typography, etc.). Rather, wireframes focus on organizational layout (information, content, navigation). Wireframes provide opportunities to refine visual and interactive elements in your design. Wireframes provide opportunities to test for usability of single screens before building interfaces.

Prototypes are simulations (they can be interactive) of the entire final website or app, or process within the site. They will look like the final product and include design elements like composition, layout, typography, etc. Prototypes provide opportunities to test for usability of the entire site, or a process, before building.

Creating prototypes is an integral part of a UX/UI designer's job. So, learning goals include
* Provide clear understanding of differences between wireframes and prototypes, and why prototyping is an important step in the User Interface and Design process.
* Familiarize students with a program they can expect to use in a UX/UI career through a workshop in which they will gain experience and create something they can add to their portfolios.

SO WHAT?

Wireframes and prototypes, and their ability to promote rapid iterations, provide design and planning flexibility, and opportunities for usability testing. Activities, resources, and assessments support this module. See other menu tabs.

Close

Mon., 4 Oct., Part 1 > Wireframes and Prototypes

Dr. John talks theory about wireframes and prototypes, the differences between the two, their benefits and uses for usability and interface design. Robert Hoekman talks about supporting the users' mental models. Several modules provide lots of information. LEARN more at course Basecamp. Close

Mon., 4 Oct., Part 2 > Wireframes and Prototypes > Practice

Dr. John talks practice about wireframes and prototypes. He is joined by Robert Hoekman who talks about turning beginners into intermediates, and designing for uniformity, consistency, and meaning. The class talks about low-fidelity prototypes created earlier. LEARN more at course Basecamp.

Close

Resources

See course Basecamp.

Close

Project #6 > Lings Cars Website Prototype

Challenge

Reinforce your knowledge of wireframes and prototypes, the differences between the two, and when, and how, to use each. Additionally, become familiar with a tool for creating prototypes. LEARN more at course Basecamp.

Close

Week 8, Mon., 11 Oct. 2021 > Writing and Typography

To Do This Week

◊ Attend class.
◊ Submit Project #6.
◊ Start Project #7.

Close

Overview > Writing and Typography

Typography

This week's focus is on WRITING and TYPOGRAPHY. Writing is the primary content of your interface. Typography concerns the styling, arrangement, and use of type to present your written content, for both aesthetics and usability. Learning goals include
◊ Learn basic concepts, such as Readability, Legibility, Contrast, Effects of Font Size, Hierarchy, Whitespace, Serif/Sans-Serif, Leading, Kerning, and Tracking
◊ Understand the differences between Readability and Legibility
◊ Use Contrast, Font-Size, and Typeface to convey Hierarchy
◊ Use Whitespace to direct users to content
◊ Form the above knowledge into a comprehensive work of typography

SO WHAT?

Reading written content online is quite different from reading other forms of text. When reading online, users tend to scan, looking for information, answers, solutions (Krug, Chapter 2, "How We Really Use the Web" and Chapter 3, "Billboard Design 101: Design for Scanning, Not Reading"). As UX/UI developers, we need to create and provide written content that is "meaningful, cohesive, engaging, and sustainable" (Usability.gov).

Typography can reinforce, or diminish, the success of written communication. Typography helps determine whether your message is received and understood, or not. Typography balances the visual appeal of an interface with its function. So, written content, and how it is presented, are important considerations for UX/UI design, especially for usability and user experience.

Close

Mon., 11 Oct., Part 1 > Typography > Theory

Dr. John welcomes Donald Norman who talks about writing as design, design as writing. Jakob Nielsen says people don't really read webpages. They scan, looking for specific words. Users won't read web content unless the text is clear, the words and sentences are simple, and the information is easy to understand. we can test all of this. A hands on activity encourages you to experiment with presenting different information using the same sample text. LEARN more at course Basecamp.

Close

Mon., 11 Oct., Part 2 > Writing and TYPOGRAPHY > Practice

Dr. John says, "If writing is the body of your interface, typography is the body language." He presents fonts, colors, and typographical attributes for consideration regarding usability and interface design. A hands on exercise prepares you for Project #7. LEARN more at course Basecamp.

Close

Resources

See course Basecamp.

Close

Project #7 > Represent Lings Cars Interface with Typography

Challenge

Use typography to represent the message(s) a user might encounter while following a specific path through the multi-layered interface of Lings Cars website. LEARN more at course Basecamp.

Close

Week 9, Mon. 18 Oct. 2021 > Usability Testing

To Do This Week

◊ Attend class.
◊ Submit Project #7.
◊ Start Project #8.

Close

Overview > Usability Testing

Usability Testing

This week's focus is on USABILITY TESTING as a way to understand how people are using your interface. Usually, a user (test subject) is asked to complete a task using an interface, typically while being observed by a researcher, to uncover potential user problems. Often, the subject talks through her thought process out loud while completing the task so that the researcher can understand her actions. The researcher carefully watches the subject's actions and listens to the monologue. Problems can be identified, and fixed. Learning goals include
◊ Understand the fundamentals of usability testing, its purpose, when it is used, and why it is important in the process of building effective interfaces.
◊ Understand concepts and uses of usability testing and quality assurance.
◊ Learn how to prepare and conduct basic usability tests, both with and without real users.
◊ Promote learning about usability testing from the tester's perspective.

SO WHAT?

In order for your interface to be successful, users must be able to accomplish tasks, achieve goals, or find information. Problems that prevent this kind of success contributed to poor usability. Usability testing is a way to evaluate how easily users can accomplish a given task on a device. Knowing how users really use your website or app can help improve its performance.

Close

Mon., 18 Oct., Part 1 > Usability Testing > Theory

Dr. John introduces theory behind usability testing using fruit. Steve Krug visits and talks about how to conduct usability testing economically. Roman Mars says, "running usability tests before deployment can also help catch mistakes early." A hands on project helps you prepare for Project #9. LEARN more at course Basecamp.

Close

Mon., 18 Oct., Part 2 > Usability Testing > Practice

Dr. John talks about the practice of usability testing, with users rather than fruit. Om Tandon provides a walkthrough of usability testing for video games. Raluca Budiu talks about making usability testing of mobile applications easy. Jakob Nielsen answers the quesetion, "How many testers are needed?" The answer, he says, is 5, except when it's not. LEARN more at course Basecamp.

Close

Resources

See course Basecamp.

Close

Project #8 > Usability Testing

Challenge

Introduction to usability testing through a collaborative exercise. LEARN more at course Basecamp.

Close

Week 10, Mon., 25 Oct. 2021 > Quality Assurance, Accessibility

To Do This Week

◊ Attend class.
◊ Submit Project #8.
◊ Start Project #9. tab.

Close

Overview > Release the Kraken!

Release the Kraken

This week's focus is quality assurance and accessibility. Both are very important as you get closer to launching your project. Launching a website/app/information portal is like releasing a Kraken. A Kraken is a legendary giant sea monster with many arms said to dwell off the coasts of Norway and Greenland and capable of dragging entire ships underwater. Possibly ancient mariners were referring to giant squids. Your website is like a Kraken; its many arms and parts can create all sorts of problems. It is best to address potential problems before launch. Learning goals include
◊ Reinforce the importance of checking code throughout application.
◊ Introduce resources for code validation.
◊ Introduce resources for open source code solutions.

SO WHAT?

Newly launched websites have many parts (arms) that can cause many problems. Before you launch your Kraken, try to catch and fix as many problems as possible.

Close

Mon. 25 Oct., Part 1 > Quality Assurance

Dr. John welcomes Jakob Nielsen who talks about the ten works mistakes in web design. Steve Krug talks about supporting the user's mental model and provides good advice about usability testing. Robert Hoekman says, "Don't innovate when you can elevate." All this and modules too. LEARN more at course Basecamp.

Close

Mon. 25 Oct., Part 2 > Accessibility

Dr. John talks about accessibility as part of UX and UI design, especially as it focuses on special needs rather than a range of human function. Graeme Fulton explores how we can better understand accessibility and people through the use of "diverse personas" in our design process. Full Stack Academy provides an overview of the concept of Web Accessibility and the Web Content Accessibility Guidelines (WCAG) guidelines to how the web can be made more accessible to people with disabilities. LEARN more at course Basecamp.

Close

Resources

See course Basecamp.

Close

Project #9 > Usability Scavenger Hunt

Challenge

Identify and discuss an example website for each of the top ten usability mistakes you have learned about through this week's reading and study. LEARN more at course Basecamp.

Close

Week 11, Mon., 1 Nov. 2021 > Mobile Interface Design, Usability

To Do This Week

◊ Attend class.
◊ Submit Project #9.
◊ Start Project #10.

Close

Overview > Mobile Interface Affordances and Design

Mobile Affordances, small, but mighty

Mobile interface design: Small but mighty.

WHAT?

User first design pyramid

This module focuses on MOBILE INTERFACE DESIGN. It is important that mobile interfaces are functional and user friendly. A mobile first design approach can help. Learning goals include
◊ Understand why mobile usability and design are important.
◊ Understand mobile design and usability guidelines and principles and be about to apply them when designing mobile interfaces.
◊ Build a foundational knowledge about usability for mobile interfaces.

SO WHAT?

On average, 55% of all web content is viewed on mobile devices. With most interaction with your interface coming through mobile devices, it is important that you understand and employ mobile first guidelines and practices that will help assure usability and user experience.

Close

Mon., 1 Nov., Part 1 > Mobile Interface Design for a small but mighty screen

Dr. John welcomes Nick Babich who talks about best practices for mobile app design and Raluca Bidiu who talks about mobile apps as "native," "web-based," or "hybrid." LEARN more at course Basecamp.

Close

Mon., 1 Nov., Part 2 > Mobile: Small, But Mighty Screen

Dr. John welcomes Jakob Nielsen who talks about a coming strategy shift from mobile apps to sites. Nielsen and Steve Krug talks about mobile usability. Ben Gremillion says we should design for mobile first, the smallest screen, and then work up. The best design he says is either adaptive or responsive. Raluca Budiu and Kara Pernice carry this argument forward when they say mobile first is not mobile only. Mobile-navigation patterns make navigation unusable on the desktop and decrease the use of this important UI element. Porting an unchanged UI to a different platform hurts UX. A module on mobile usability is available. LEARN more at course Basecamp.

Close

Resources

See course Basecamp.

Close

Project #10 > "Design" and Design Mobile Website Features

Challenge

Create a prototype design for what you consider to be a mobile interface for the Lings Cars website, a design that promotes usability and good user experience. LEARN more at course Basecamp.

Close

Week 12, Mon., 8 Nov. 2021 > Activity, Situation, Human-Centered Design

To Do This Week

◊ Attend class.
◊ Submit Project #10.
◊ Start Project #11. See "Project #11" menu tab.

Close

Overview > Mobile Interface Design

Activity, Situation, Human-Centered Design

WHAT?

This module focuses on ACTIVITY, SITUATION, HUMAN-CENTERED DESIGN. Learning goals include
* Different approaches for different purposes.
* Each offers unique benefits, and drawbacks.
* Choosing which to use involves carefully considering audience and context.

SO WHAT?

With an increasing number of mobile users, we can no longer just build static interfaces (think webpages). Instead, we need to think of designing for mobile devices. This prompts three approaches to design: Activity, Situation, and Human-Centered. Which to use, and when, is an important consideration, and must be addressed.

Close

Mon., 8 Nov., Part 1 > Situation

Dr. John welcomes Donald Norman who talks about human-centered design and Roman Mars who says evolving communication design minimizes the human-computer interface allowing us to focus on designing for real human needs. Modules too. LEARN more at course Basecamp.

Close

Mon., 8 Nov., Part 2 > Best Practices

Dr. John leads a prototype workshop focused on best practices for mobile usability and interface design. LEARN more at course Basecamp.

Close

Resources

See course Basecamp.

Close

Project #11 > Prototype for Action-Oriented Mobile Interface

Challenge

Create a prototype for a mobile version of a website that provides information and directions for a walking tour of downtown Vancouver that includes stops for listening to specific sounds at identified locations. LEARN more at course Basecamp.

Close

Week 13, Mon., 15 Nov. 2021 > Universal Design

To Do This Week

◊ Attend class.
◊ Submit Project #11. ◊ Begin Project #12.

Close

Overview > Universal Design

Presentations

This week's focus is on Universal Design and preparations for your Capstone Project.

Close

Mon., 15 Nov., Part 1 > University Holiday. ***No Class***

Universal Design . . . Dr. John leads a discussion about Universal Design. Can there be such a thing? Be prepared to share your thoughts and ideas. LEARN more at course Basecamp.

Close

Mon., 15 Nov., Part 2 > Capstone Project Preparation

Dr. John leads a discussion about the Capstone Project. This is a good opportunity to ask questions and discuss your ideas. LEARN more at course Basecamp.

Close

Resources

See course Basecamp.

Close

Project #12 > Usability Highlights

Challenge

Collect and present the best idea for usability and interface design from each week of this course. LEARN more at course Basecamp.

Close

Week 14, Mon. 22 Nov. > Fall Break (NO CLASS!)

To Do This Week

◊ Fall Break. NO CLASS!
◊ Submit and present Project #12 next week.
◊ Do one of the following during the break . . .
    Master Kung Fu.
    Switch religions for a day.
    Wear a fake mustache for 24 hours.
    End homelessness.
    Earn the trust of your nemesis, then vanquish it, preferably with magic.
    In the shower, use conditioner first, then shampoo, just to see what happens.

Close

Week 15, Mon., 29 Nov. 2021 > Usability Highlights Presentations

To Do This Week

◊ Attend class
◊ Present your Usability Highlights project.

Close

Overview

This week's focus could be managing chaos. Students in the Senior Seminar may bring their Capstone Project to us for testing. This will be an opportunity to apply what you have learned about usability and interface design to help them improve their project. One day, you may be bring your own Senior Seminar Capstone Project to this class, so this is a good opportunity to learn how this exchange of ideas works.

Additionally, we should share our Usability Highlights projects with each other as it will be a good learning experience for everyone. So, be prepared. If I call you to present your project, be prepared.

Close

Mon., 29 Nov., Part 1

Dr. John hosts possible usability testing for Senior Seminar project
and/or
Presentations of Project #12 Usability Highlights.

Close

Mon., 29 Nov., Part 2

Dr. John continues hosting possible usability testing for Senior Seminar project
and/or
Presentations of Project #12 Usability Highlights.

Close

Resources

See course Basecamp.

Close

Week 16, Mon. 6 Dec. 2021 > Capstone Project Presentations

To Do This Week

◊ Attend class.
◊ Support Capstone Project presentations.

Close

Overview > Presentations

Presentations

Attend class and support everyone's Capstone Project presentations.

Close

Mon., 6 Dec., Part 1 > Capstone Project presentations

Dr. John hosts Capstone Project presentations.

Close

Mon., 6 Dec., Part 2 > Capstone Project presentations

Dr. John hosts Capstone Project presentations.

Close

Resources

See course Basecamp.

Close

Course Evaluation

CHALLENGE

Say something about your course experience. If you have not done so already, please complete the online evaluation for this course. You should have received information about this some time ago, and I have reminded you several times. Please do this. The future of the known universe depends on your evaluation.

Close

Week 17, 13-17 Dec. > Final Exam Week

To Do This Week

Panic now. Avoid the rush.

Close

Overview > Final Exams

Final exam week

WHAT?

***Time and date here***
There is no final exam planned for this course. But, this date and time reserved in case needed for class.

SO WHAT?

So, watch this space. News will appear here, as it develops.

Close

Resources

Exempt those exams! (Flash plugin required)
by Strongbad

Close