Slide deck is hosted by GDocs, and can be viewed HERE.

Slide deck may also be viewed here:

Our presentation: rethinking the web experience

Our notes

Our group notes are hosted on GDocs. Here’s a link to them, and here they are below.

Part 1: Using your findings from your Summative Evaluation during class, brainstorm a design solution for at least one of the usability issues uncovered during the testing. Wireframe or mockup your final concept.

• One major usability issue uncovered was finding information on the directory. Our test case, a junior journalist, was having issues finding the blogs she particularly wanted to to read or thought where the most relevant. All the information was in front of her, it was just badly presented, so she had a harder time finding the correct blogs.
• The blog directory was reorganize by having the left side of the screen display articles that fall under the category (in the image, its news). On the right, individual blogs that fall under the navigation category are presented.
• This allows for easier navigation of blogs. For example, if the user wanted to read about science, but does not know the difference between the science blogs, he/she can look up all recent articles being published by those blogs. This allows users who are new to the NYT blog system a smooth introduction. For more experienced users, they can pick his/her blog choice from the right.
• Summative Evaluation notes (hosted on GDocs)

Part 2: Prepare for project speed dating by composing a list of questions for our potential clients.

• List of questions for our potential clients (hosted by GDocs)

We evaluated that the Pitchfork website has the potential for an interactive interface, but currently is very non-interactive. A few things on our re-design:

• Make the search bar more prominent, to welcome the user to ask questions
• Make the navigation bar as minimalistic as possible
• Convert the top ad into an interactive music player, where they can search and listen to artists the website endorses / likes.
• Take the overload of information spewed on the home page and organize it into three column category spread
• Removing the “interaction” of reviews. Seems pointless.
• Adding interaction with the “events” category, where people would want to search for information that is date and location sensitive
• Move the social media icons as not to have the main attention

I personally had mixed reactions to the exhibit ‘Talk to Me’. In one hand, it was great to see how contemporary artists are working to bridge the gap between the communication of people and objects. In the other hand, it seemed odd that companies had their products on display.

I can understand the argument that people would make why it should be on display. These companies (Barclay, JetBlue, MTA) have designed products that has broken down the barriers of communication and ease of use between object and people. They have taken the design of objects that have been iterated multiple times and turned them into art. We’ve been bombarded by countless horrible designs that when we finally see and interact with one that breaks the mold, we consider it art.

Seeing great design that customers interact with should not be considered an art; it should be the norm. Companies need to spend more time on minimalistic-feature & beautiful design rather than adding countless useless features to their objects. Companies that engage with customer should make it their highest priority on designing objects that will ease and enhance the communication between its patrons and the company’s objects. Until then, great designs will be considered art and horrible designs the norm.

Chapter 5: Choice Architecture

• The “Automatic Systems” will always tell us instinctly how we should react.
• “Stimulus response compatibility”
• “Automatic Systems always win over Reflective Systems”
• “If you indirectly infludence the choice other people make, you are a choice architect”

DEFAULTS: PADDING THE PATH OF LEAST RESISTANCE

• “Defaults are ubiquitous and powerful”
• Great difference between “self-serving” and “helpful” defaults
• No Child Left Behind opt-in vs opt-out default
• Complex choices are bad to be required choosing

EXPECT ERROR

• The Paris Le Metro expects users to mess up, and is set up to handle that
• “Postcompletion” error – predictable error, once the main task is finished, folks forget things that relate to the previous steps
• “Forcing function” – “in order to get what you want, you have to do something else first”
• The more you have to do something, the more you can forget.
• “Habits are controlled by the Automatic System”

GIVE FEEDBACK

• Good to provide feedback to humans
• Assumed feedback (digital coping analog noises)
• Don’t give too much feedback

UNDERSTANDING “MAPPINGS”: FROM CHOICE TO WELFARE

• Provide proper mappings to understand the choices given
• RECAP: Record, Evaluate, and Compare Alternative Prices
• RECAP programs help people make smarter decisions

STRUCTURE COMPLEX CHOICES

• “Elimination by aspects” acts like a filter.
• The more choices folks have, the more important choice architecture becomes
• Netflix success in part comes from good choice architecture.
• Some people like collaborative filtering
• Don’t just show folks what other folks like them like, also show what other people with different tastes like.

INCENTIVES

• Questions to ask: who uses / chooses / pays / profits?
• Supply & Demand
• Salience is important, and can be manipulated.
• Being more blunt now has a bigger effect than being blunt later.

NUDGES

• iNcentives
• Understand Mappings
• Defaults
• Give feedback
• Expect error
• Structure complex choices

1. For web form design, add a dash of quirkiness (communicate personality)
2. For web form design, break down the steps (make user feel like they are completing steps)
3. For web form design, validate clearly (don’t make users spend extra time)
4. For web form design, “people want to interact with elements that feel alive and that follow convention”
5. For web form design, “make sure that the way of submitting the form is bold and specific”.
6. For web form design, use clear labels (non-threatening as possible).
7. For web form design, “selecting items from a list is naturally easier than filling in a blank”.
8. Include a tagline (“should be the most obvious element on a website’s front page”)
9. The less graphics the better (“dont’ use extensive graphics”)
10. Search box must be “27 characters wide” to easily display text.
11. Put search box on top of web page.
12. Avoid CAPTCHA
13. “Be careful of low contrast color schemes”
14. “Keep the user interface consistent”
15. “Don’t design graphic elements that looks like a button, but is not”
16. Reduce the cognitive load (“don’t be afraid of the white space”)
17. “Long text blocks without images and keywords marked in bold or italics will be skipped.”
18. Color should be used to group related items.
19. “Red or green should not be used in the periphery of the visual field, but in the center”.
20. “Color codes should respect existing cultural and professional usage”.
21. Use bread-crumbs to lets people know where they have been.
22. “Site logo links to home page”
23. “Keep most important website content above to fold”
24. Clickable labels & buttons
25. Have active navigation
26. Add focus to form fields
27. Increase the hit area on a link
28. Faceted search on the left
29. Keep homepages clutter-free
30. Let users search

Sources:

• http://sixrevisions.com/usabilityaccessibility/five-simple-but-essential-web-usability-tips/
• http://www.keyrelevance.com/articles/usability-tips.htm
• http://www.webdesignerdepot.com/2008/12/10-usability-tips-for-web-designers/
• http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
• http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html
• http://www.netmechanic.com/news/vol7/design_no4.htm
• http://www.thescube.com/blog/essential-website-usability-and-web-page-design-tips/
• http://www.webdesignerdepot.com/2009/06/10-tips-to-create-a-more-usable-web/
• http://designreviver.com/tips/7-common-web-usability-problems/

• Younger, 3/4th’s are under 34
  • Demographics
  • Age of Typical Facebook User
• Found discussion forum on facebook.com about the error message- primary research
• Folk son Facebook like to look at their personal photos & friend’s photos
  • New Timeline Layout shows this
• Facebook UI is boxy with squares and rectangles, so our design is keeping to that style.
• Lucida Grande font
• Its about them
  • Facebook Persona
• Diverse Background
  • Facebook Statistics

Persona: Mark Johnson

• Age: 25
• Alumni of Michigan State
• Majored in Sociology & Anthropology
• Lives in Westfield, Wisconsin
• Marital Status: Single, but has girlfriend
• Uses Facebook to keep up with distance college friends and current girlfriend
• Likes to look at friends’ photos
• Curates his profile
• Job: Floor manager at a popular coffee shop
• Uses his mobile device to check Facebook
• Likes to skateboard & go on hikes
• Fan of Zynga, likes Farmville and so does his girlfriend
• Listens to indie rock (don’t worry, you’ve never heard of the bands)
• Uses smartphone to take photos when hanging out with friends
• Likes to photo-document hanging out with friends

Main Concourse:

• People are going from Point A -> B
• Few folks stop and ask for directions at the center question booth
• Buy tickers on the side walls
• Transition area; have options to go to tracks, shopping, eating, or leave
• All shops and food are on the way to/from the platforms, spread out, or downstairs
• Architecture, ceiling capture attention
• People with too much time people-watch from the French-inspired stairs
• Most ignore architecture/surroundings if on tight schedule
• Wings contain shopping
• Food court at bottom
• Looks like they don’t want you to sit in the main concourse.
• Arrive through 6 door entrences and tracks (via ramps)
• You have to pass through the main concourse (possible bottleneck)
• People don’t look like they are enjoying themselves
• Folks have places to go; dictated by time
• Unless they are in a group or with significant other, they look “busy”
• Main concourse is a natural stopping point, contains info booth, trains schedule, clock
• Grand staircases, people love to stop and stare down
• Beaux-arts architecture
• Dinning downstairs
• Middle help desk = tourism help magnet
• Train departure affects decision-making behavior

Discussion Notes:

• Floor markings to designate non-traffic area
• Non-traffic area
• Designated circles
• Outline floor areas
• Minimize/Decongestant traffic flow
• Improve traffic flow
• “Bike Lane” style
• Commuter Express Lane
• Make people happier

Online Notes: Via google docs

3-Slide: Via google docs