EBoard 02: Design
This class will be recorded! Its use will be limited to members
of the class. Please do not share with others.
Approximate overview
- Preliminaries
- Administrative stuff
- Q&A
- Short Surveys
- Fun with questions
- A bit of lecture
- Rant on UI/UX terminology
- The design of 232
- What is “Design”?
- TPS / discussion
- Reading overview
- Affordances
- Design ethics
Administrative stuff
General Notes
- I hope you had a wonderful weekend!
- Reminder: The class Web site is at
https://rebelsky.cs.grinnell.edu/Courses/HCI232/2021SpT2/.
- Sam: Don’t forget to put that link in the chat.
- The class Web site is (always) a work in progress.
- I apologize for neglecting to remember the lack of affordances provided
for off-campus students viewing online articles.
- I also apologize for the delay in posting the assignment.
- I’m working from home today. I don’t expect my mediocre ISP to affect
class (it usually doesn’t), but it might.
- Today’s image snapshot is from a Sketchpad video.
Upcoming Activities
- Tuesday, 6 April 2021, 7 p.m. Student Poetry reading.
Students from the Poetry & Performance short course (Eng/GWSS
195) give a live Zoom reading of the poems they’ve crafted under
the mentorship of award-winning poet jessica Care moore. In this
course, students studied and wrote poetry that embodies language
as an act of survival. Inspired by readings from Ntozake Shange,
Sonia Sanchez and Audre Lorde, Rachel Eliza Griffiths, Honorée
Jeffers, Tongo Eisen Martin and more, students explored the
intersection of poetry on the page and interdisciplinary performances
of poetry as spoken word. Hosted by jessica Care moore!
- Zoom link: https://grinnellcollege.zoom.us/s/94032165359
- Thursday, 8 April 2021, 5 p.m. MyroC with Robots: Motion, Timing,
and Image Processing.
Work for Friday’s class
Q&A
Some Short Surveys
- Did you watch the videos in Ko 1?
- The “Mother of All Demos” video was really cool, especially since
it was the late 1960’s. We would have thought they came a lot
later than then.
- Did you look for other Ko chapters?
- Sam concludes that video is more exciting than text, even for Grinnell
students.
Fun with questions (TPS)
In groups of three, read through the questions, pick one to discuss (other
than one the three of you presented, and be ready to summarize your answer).
5 min reading and thinking
2 min selecting
8 min discussing
Q: Which UI approach works better: Typing in the chat (first two announcements)
or the announcement feature (last two). [Sam should use the second.]
Group 6: Ko discusses gulf of execution but also says that having to
teach UI is a design failure. What?
- Decision: You’d like as much to be intuitive as possible, however …
- For sufficiently complex programs, you can’t make everything visible.
- Try to minimize tutorials, but include them, since not everything is
intuitive.
Group 7: Is standardization colonization and if it is, what should
we do about it?
- Important to ask: When is it necessary and when is it inappropriate.
- No conclusions.
- Glocalization as an approach: Do different countries have different UIs?
Can you make culturally sensitive UIs?
- Followup comment: I think research in general should be more cross-cultural.
Group 2: Would better signifiers correspond to a better user experience?
- Yes. That was easy.
- Does a lack of signifiers increase the gulf of execution? Yes.
- The sad reality: There will always be a minority that is not being
included in UI design.
- Unfortunately, too much UI design is driven by profits rather than ethics.
- The sad reality is that designers are, in effect, enforcing their
perspectives onto the population.
- But being inclusive is difficult.
Group 5: We answered a lot of questions (well, three)
- How do Ko’s models relate to boundary objects: Scenario vs. Persona vs.
- Boundary objects are things that have to be understood by people in
multiple regions.
- Peronas: Help people understand the problem, the model of the
problem.
- Gulfs of execution and evaluation
- The amount of learning/time it takes to use it takes to get
the intended result.
- How do you frame a question? Does it need to be something you
experience? We don’t have that experience.
- Listen on message boards or elsewhere
- Observe, observe, observe
Group 4: How do you define a problem?
- Do you have data?
- Can you look for patterns in surveys?
- Some problems are more significant than others.
- “We spent our time defining the problem of defining the problem.”
Group 3: Intuition in interface design. Intuition is often “convention”.
Does that limit creativity?
- There’s a difference between intuition and instructions.
- Collective knowledge comes from somewhere.
- There is room to experiment with different interfaces.
- There might be a balance.
Group 8: Ethics behind user interfaces. Many programs are designed
to adict you. How do you counter that as a user? As an employee?
Can you really quit your job?
- Quitting is not really realistic. Jobs are hard to find. It’s
a hard topic.
- And shouldn’t the UI’s goal be “Get people to use the product?”
Group 1: Why is technology waste a UI issue? And how do we minimize
that waste as UI designers?
- Better UIs leads to more demand.
- And we get new updates and upgrades, which leads to technology being
thrown out.
- Regulations and incentives could help address these.
- Make it something companies want to do.
Detour on terminology
Or “Sam has fun with Adobe”.
https://xd.adobe.com/ideas/process/ui-design/ui-vs-ux-design-understanding-similarities-and-differences/
Quotation one.
What is UI?
A user interface is a place where interactions between humans and machines occur. It allows users to effectively operate a machine to complete a task or achieve a specific goal, like making a purchase or downloading an app. In fact, you are using UI right now to read this article right now.
User interfaces are composed of input hardware (devices that control the machine from the human end like a keyboard, mouse, or joystick) and output hardware (devices that provide information to users like monitors, audio speakers, or printers). Input devices work together with output devices so users can fully control the machine.
There are many different types of user interface. Here are the three most common UIs – command line interface, graphic user interfaces, and voice-enabled user interface.
Quotation two.
The role of UI designer
The role of UI designers is more relevant to the visual representation
of information. UI designers should have graphic design, visual
design, and branding design skills to create interfaces that have
a good look and feel. Usually, UI designers take the user flow and
wireframes for individual screens/pages created by UX designers
(skeleton of design) and turn it into something aesthetically
pleasing (dressing-up the skeleton).
Sam’s conclusions:
UX designers design UIs. UI designers style UIs.
I hate industry.
User interfaces to learning HCI
Aka “Designing an HCI class”
- HCI is a broad field. It can be about UI/UX (Usability), about the
design of new mechanisms for interacting with computers, about doing
research in the area, all of the above.
- Way too many related terms with inconsistent definitions (see above).
- N basic ways of teaching a class like this (plus hybrids)
- “Hands on” Each class (or set of classes) takes us through the
next step in building a product)
- “Pure theory” - Each class is “What does it mean?” And
“what do the experts say”?
- Textbook (three books from the last session)
- Online readings and videos (Stanford)
- Only the research literature (???)
- We’re doing an accellerated minimized version of the course
- A bit of “hands on”
- A bit of reading and reflecting
- A bit of discussion to help keep us on track
- Hoping for ~10 hpw (14 for those who want A+++++ and do things slowly)
What is design, anyway?
- “Making things pretty.” — Anonymous
- “Problem solving.” — Ko
- Dealing with a variety of conflicting requirements and
coming up with a satisficing solution.
- Also: Engineers, Computer Scientists, Liberal Artists
- “Does anyone ever agree on terms?” — Rebelsky
- “Shared meanings and representations (through common language) are
an absolute must in science, art, and everything in-between.” —
Hartson
Design processes
Common five-step process (the steps are similar, the terms differ)
- Identify the problem (Empathise, Observe, …) - Look around, see
things that are difficult, consider whether you want to address them.
- Specify/Define (Think about the “users”, think about the situations,
do studies to better understand (e.g., interview))
- Ideate (Come up with possible solutions)
- Good design springs from the communities you serve
- Prototype - Increasingly complex models of the solution
- Test - Work with others on using your prototype (cycles back to prototype
and ideate and perhaps even specify define)
Iterating
- The typical iteration is described as “design / test / analyze”
Some notes and quotes on iterative design
- “Typically, one would complete a design and note the problems
several test users have using it. These problems would then be fixed
in a new iteration which should again be tested to ensure that the
“fixes” did indeed solve the problems and to find any new usability
problems introduced by the changed design. The design changes from
one iteration to the next are normally local to those specific
interface elements that caused user difficulties.” — Nielsen
- “If one has to choose between two or more interface alternatives,
it is possible to perform comparative testing to measure which
alternative is the most usable, but such tests are usually viewed
as constituting a different methodology than iterative design as
such, and they may be performed with a focus on measurement instead
of the finding of usability problems. Iterative design is specifically
aimed at refinement based on lessons learned from previous iterations.”
— Nielsen
Ideas borrowed from
Interation Design Foundation. 2021. “Design iteration brings powerful results. So, do it again designer!” https://www.interaction-design.org/literature/article/design-iteration-brings-powerful-results-so-do-it-again-designer.
Nielsen, Jakob. 1993. “Iterative User Interface Design”
https://www.nngroup.com/articles/iterative-design/
Zimmerman, Eric. “Play as Research: The Iterative Design Process”
https://static1.squarespace.com/static/579b8aa26b8f5b8f49605c96/t/59921253cd39c3da5bd27a6f/1502745178453/Iterative_Design.pdf, linked from http://www.ericzimmerman.com/publications.
Reading overview, revisited
Skipped
A TPS exercise
A slight switch from the journal(s): Suppose NAME did not read
the chapters assigned for today. What are the primary takeaways
you would share in one minute?
Affordances
A TPS exercise
- What are they?
- What role do they play in the design of user interfaces?
- Favorites from Task 02
Some answers/thoughts
- Started with Gibson’s physical properties: The shape/size/physical
properties give you a sense of how a think can be used. Helps
us think about the functionality.
- Categorization into four categories
- Physical - Physical indicator (e.g., button size)
- Sensory - Using your senses to indicate something (closely
linked to physical)
- Cognitive - Labels, the things that let the user know what something
does.
- Functional - Helps the user (part of cognitive), what the thing
is supposed to do (Door stops)
Design Ethics
A TPS exercise
Ko introduces four ethical issues in interface techinologies (with
the easy-to-recall sraw acronym)
- Interface technologies standardize, erasing diversity
- Interface technologies reconfigure human experience
- Interface technologies amplify social choices
- Interface technologies waste
If you talked to the technologists involved in developing the user interfaces
Ko mentions, most would not have predicted the negative implications.
- How can interface designers (and, I suppose, all technologists) train
themselves to predict negative consequences?
- What other negative implications of interfaces have you observed or
thought about?
Design Ethics, Revisited
Another TPS exercise
Read the UXPA Code of Professional Conduct
- How does the code of conduct help address the issues Ko and the class raised?
- How does the code of conduct fail to address those issues?
- How would you change the code of conduct?
- Why do you think it looks like this?
Getting started on Investigation 1