/ DESIGN

UX design notes part 3

Optimal Sort: helps you with information architecture, card sorting

  • test how people think content should be organized
  • test with lots of people
  • can do this manually with paper cards and in person
  • Optimal sort found here

4:1 worksheet for wireframing

  • draw four different ideas for how a page might work, then take the one you like the best (for whatever reason) and draw it in one box
  • can do this for each section of your website that you got from your information architecture

Wireframes

  • Balsamiq is a good tool, partly because of the hand-drawn look
    • hand drawn looks unfinished, so people will not get too attached and think it’s the final product
    • looking good and having an aesthetic draws people to it. Aestheics are important. If it doesn’t look good, people won’t like it and they won’t use it.

Perception

  • to improve perception skills, think of something that you firmly believe is correct, and think of an argument for why it is incorrect
  • logic is the enemy of perception, it tells us we already know the answer; perception makes us go out and look for more answers
  • we perceive a small amount of the world around us - our brain is interpreting what we see
  • don’t want to assume the user is seeing everything on the page

Can design applications for a focused or diffused state of thinking

  • Google is for a focused state; it is minimal, not a lot of distractions, has pagination
  • YouTube is for a diffused state, when you are looking to browse and be distracted; lots to grab you attention, infinite scroll, lots of ads

Memory

  • Iconic memory: in our eye, fast and short, picks up patterns, light, colors
  • Filters: only see what we are looking for, decides whether we should pay attention to it
  • Working memory: can only hold a few things at once, finite, only add to it if it’s really important because we need to take something else out to add it in
  • Long term memory: for a lifetime

Visual encoding channels: things that make items stand out

  • position, color, size, shape, texture, gradient, angle
  • color: hue, brightness differences
  • position most important - why we make wireframes

Hierarchy

  • determining how important something is
  • headings big, meta-information small
  • you can only pay attention to one thing at once
  • you can’t make everything on the page the most important thing
  • assign items on a page with a hierarchy score

Pre-attentive channels: channels we can identify without focusing our attention on them directly