Wednesday, March 7, 2012

Interaction Design | guest lecture, JoEllen Kames, 21w.789

http://web.mit.edu/21w.789/www/syllabus12.html
http://web.mit.edu/21w.789/www/notes/designnotes.pdf

a semester compressed into 3 hours
UX design, IxD, Industrial Design

Going from Interaction Design to Interface Design



Modelling:
We are defined as mobile application. How does it relate to someone's life?

Why not jump straight into making it?
* Define if need to get information from elsewhere
* e.g. weather and stocks
* Drawing a picture -> extremely powerful for getting on same page

Also, show in 5 to 10 minutes to people who decide future of your project

Examples.
HCI: using metaphors. 2007: future of the phonebook?
2007: motorola owned the phonebook. and we were a walled garden (no things from other mftgs). mostly own own OS and had a lot of control. some look into social networking. realize that things may be beginning to change. when talked to people, not envision phonebook but rather friends. google was working on android, iphone come out but very app-based. motorola supporting 8 different platforms at time.

more hubs and spokes.

before and after metaphor: how does it make people's lives better?
at the time, had to do everything manually. type in each person's phone number. After: hope to make it more like learn what friends up to than management heavy.

3rd mental model: how do people think about the people in their lives? how did they cluster / organize them?  it is an anthropomorphic well-known phenomenon that they validated with their own data collecting.


2007: can be able to manually form groups. But wanted a much more fluid structure. > favorites.  go from 30 contacts avg to 300, 400, 500 > how to manage that information.

How to integrate data from other sources (not happen at the time)?

Model: determine who need to ask to do work (flickr, yahoo, etc.) -> diagramming it

Content types: from demanding to ... patient ones... how to give Content a Behavior on a device.

User type: students, faculty, everyone (?___? hard to design for but common e.g. for weather)

Motorola has common archetypes of people (amalgated from real people). Very specific: what devices, what media, their life story.  A lot of back and forth, but now fairly fixed ACROSS projects --> but does depend on the type of project. Segmentation of people. Have twelve (making whole device, not just an app!). From leading edge people to ...

administrator often forgotten -> are the views / behaviors of your system different?

so for us, maybe lump all students together.

^-- more high level
===
structure, flow, and process:

In reality: do go back and forth, since when have an idea hard to not sketch it out

undoing wireframes is expensive and tricky

also at information architecture: business owner, designer, and engineers all agree at use cases and use flows. Explicit among stakeholders -> saves a lot of money. Esp since once people see screens, engineers can get very attached to them. so efficient to get buy in earlier on.

For world today (not in 2007) there are fairly standard operating systems.
understand conventions of OS working with

iOS: very clear and approved guidelines
Android: less wild-west, ice cream sandwich: much more codified how it will look / interact: google suggesting will look better like ice cream sandwich

Where does back button? Android: hardkey, iOS: softkey at top.


  • What is goal of user 
  • then how it is achieved (send message to send messag,e or to meet up with friend.
    • life, experience, end goals.
    • life: take care of people they love, have a harmonious family
    • experience: do they want to have fun or just get something done,
    • end goals: when find app in store, what expectations have after invest time / money? must match goals very quickly or else may use once and discard at spring cleaning
  • Input methods
    • all in mobile, is there kyboard, voice, gestural (shake it), webapp, 
    • views: calendar (month, day, agenda)
    • individual contact, whole list, or visual view,  all contacts, can be complicated depending on amt of info
  • key path scenarios:  going through app
    • use case clusters
    • engineers pretty used to it
    • very specific: address or not address , set specific scope and priorities
    • first column: core to system (ship) or important (to vision) or nice to have
    • other cols: platforms and such, feasible or not
    • what implement by end of semester or not, prioritize implementation and can think in phases, can have placeholders structurally even if to reveal to end users initially
  • (more like websites than mobile apps) information organization: top down, you decide categories and then fit the stories, or draw categories by looking at all the stories that you have
  • mobile: tends to be pretty sequential because of screen size: do one thing at a time. Hierarchical: common as a site map unless applying job / purchasing something, becomes sequential
    • trickier on small screen because: C may be most interesting in app, may need to be pushed to beginning so they get value. Not first in how you think they should do, but in delivering value to them
    • 2d contacts, and then 3d contacts to groups
  • Interaction model: How to filter: 
    • contacts, A-Z, by location, by upcoming meetings, people with recent updates, 
      • individual contact: communication history, groups they were part of, shared events, 
  • Hardest part of app: facebook not want to be next to twitter, myspace, not on same page, etc. Struggle to make legal agreements and desired ux. Explain from UX why best interest from them to be together.
  • All of the boxes are numbered and represent unique screens (see ppt)
  • Will go back to sketches for new apps / versions -> due to variation between blueprint and what actually got built
  • Sketch out possibilities before building
    • list boring to interact with, how to make it more lively > a carousel
    • vs. undo built things to do better way (not necessarily more efficient, but also just visual explorations)
  • A few notes: no right visual language, although there are common standards
    • box for screen, diamond for (???), 
    • key is to be consistent with design language
    • make sure to think about the background where info comes from
====
Interface Design
Standards of best practices: Wodtke:
  • way posting -> of state
  • avoid getting in error state
  • make sure you realize some people new to smartphones, unlike you the expert
  • and other resources are way more specific
Ice cream sandwich and iOS: have very specific look n feel / conventions
2007: no clear platform, so screens are platform agnostic

There were dropdowns and touchscreens before iPhone (e.g. in China, with stylus)
  • dropdowns are tricky, avoid them
  • there are conventions, e.g. radio buttons vs checkboxes etc.
  • dropbox in middle of screen unheard of in 2007
their design 2007: when people using Razor, and a closed-lid interface (secondary screen when closed), this is months after iPhone released -> moving to touchscreen interface

people have data plans, easy APIs for webservices, internet

facebook: only one mobile guy at time, they are tiny startup in palo alto. number one mobile manufacturer Motorola at time.

screen capable of displaying it all, interface rich enough to navigate all -> device to device interaction is a new paradigm and not all in same ecosystem -> can it interact with old devices? beyond walled garden of own stuff (internet of things!)
  • solve a real need that people have -> makes their life better in some way
  • and keep iterating
  • and some fairy dust for making it delightful
and have more basic, static -> dig through menus to find it

wireframes are pretty static -> mix of screens and flows. in end state very sequential medium, so end up screens and flows.

e.g. how to create contact from scratch

Codification of prototype: how are we trying to communicate with with this prototype -> print out and put above desk
  • games are a new type of prototype
  • used to get a group of people to build consensus
Books: about face 4 (not 3) now

Assignment:
pick 3 or 4 use cases: and we will evaluate each other at next class. so classmate will work through use case via paper.