Designing around human limitations: Here are a few limitations that people have that
designers have to be aware of: How good our memory is, how we multitask, and how easily
distraced we are.
Memory overload: There are tewo main types of memory: short-term and long-term.
Long-term memory stores things that we do so much that our brains choose to store it in the
long-term. Short-term memory stores things for only a few days or even minutes if it decides
it isn't important enough.
The 7 +/- 2 rule: It was first thought of as memory can hold about 7 (+ or -) 2
chunks of data in their short term memory, and people started saying that menu items should
not have more than 7 (+ or -) 2 items in it. Yet menus can have more than 7 (+ or -) 2 items
if they are also grouped together.
Telling stories: If your sites tell stories than it helps people learn more baout
what your conteent is rather than if your content was just bland and boring.
Distractions: When something moves or pops up or some other thing that distracts us
from our content, our brain, which is still hardwired to respond to danger if necessary.
Try to not have too many distractions on your site or your users will have trouble with
navigating and staying on it.
Notifications and alerts: Notifications and alerts are the main culprit of
distractions, because they could happen at any time and remove your focus from what you are
currently doing. Notifications are designed to be ignored, and they can fade away eventually
even if they haven't been actively dismissed. Alerts are designed to be read, and have to be
acted on before the user can continue their task.
How We See Things: Perception Principles
Flow and scanning: When the flow of a web page or some other thing is consistant, and
normal, then we feel comfortable and secure, but when things are out of place or don't fit
well with each other, we become stressed because it doesn't seem right.
How we group the things we see: There are a few ways that we perceive things in the
world. One is proximity, which is elements that are closer together appear to be related and
in groups. Similarity is when things that look similar are put in a group and connected.
Closure is when the elements are connected into a shape that helps symbolize them.
Consistency: Make sure that there is consistency by having a good behavior pattern,
appearance, and organization.
How we (don't) read online: How some people read online is for research and not
really entertainment (mostly on computers). People usually have their entertainment with
videos or music. How people usually follow the content on the screen is by an F shape, where
their eyes start on the top left side and work their way down the screen.
Vision issues: As people age, they start experiencing side effects, and one of them
is vision loss. When people lose their vision, it gets harder to read and see things so they
use magnifiers on their computers to see, or in the case of blind people, screen readers.
Real-World Metaphors: Physical Concepts
Desktops aren't desk tops: The desktop on a computer isn't an actual desktop, because
the trashcan is under the actual desktop and npot on top, but the desktop on a computer
shows all the main files and apps that are installed on it. This is an example of a
metaphor, and a lot of things on the computer are named after a couple of real life things.
Fitt's Law: Fitt's Law says "It's faster to hit larger targets closer to you than
smaller targets farther from you", and came up with an equation for it too: T =
a + blog2(1 + D/W)
Interaction speed: The speed that a website needs to basically be at in order to let
the user feel like they are in control is <0.1 seconds, and for it to go to a new site,
<1 second. And to keep people focused on their task, the interface would have to respond
in <10 seconds.
Input speed: All the speeds talked about in last video were output speeds, input
speed is based on how you use the technology. A keyboard, which isn't going to go away
anytime soon, is used not just for typing a paragraph or something, but is also used for
commands, like the enter button to hit a link or the spacebar to scroll all the way down to
the bottom of the page. The mouse is great for people who don't know the keyboard shortcuts
to navigate, but can use a mouse. It is faster for manipulation, and easier to use. The
touchscreen is more like a mouse than a keyboard, because it activates links and other
things like that just by tapping the screen, but it doesn't have all the functionality that
a mouse has though so it is limited in what it can do.
Voice control: Voice control devices can be used to tell the computer or device what
to do with voice recognition and programmed commands. It has its limitations though, because
if you are in a loud room, then the device will get confused and not do what you want it to
do. Another thing is if you give it a complex command, then the device would have to guess
what the meaning was behind your command.
International differences: When designing your site to be usewd all over the world,
you are going to have to think about the possibility that your site is going to be
understood in one part of the world, but probably not in another.
Telling a Story: Workflow Concepts
Smoothing out the workflow: A good storytelling website hides implementation details,
removes unnecessary choices, and moves people forward in their task. Their are five key
concepts that you should implement in your design: Smart defaults, Control vs being led,
progressive disclosure, inductive interfaces, Research interfaces.
Smart defaults: A Smart default is basically a most commonly used setting unless it
is not safe, and if this is the case then the safest possibility is used. To figure out what
is the most commonly used option, you would have to examine system logs, and watch what
other peole are using.
Control versus being led: There are times whn someone will want to have total control
about where they want to go or do on their device, but then there are moments where they are
ok with having it lead them through a tough situation. If the user cares about the details
then they would most likely want to be in control, while if they only care about the end
result, then they would want to be led.
Progressive disclosure: If you have a lot of clutter after you have removed a lot of
useless interactions or anything, then you could gather it all into groups based off of what
they are, and move them to a section of the area where you can access it later when
necessary.
Inductive interfaces: Usually interfaces are deductive, as in a bunch of form fields
and the user must deduce what is going to happen. Usually inductive interfaces ask two
questions: What am I supposed to do now? and Where do I go next?
Knowledge work interfaces: Knowledge work interfaces are also called research
interfacee, which are made by researching about how users would access sites like this, and
design it based off of your reseach. There are three main aspects of this type of interface:
Research, Iterate, Take Action.
Communicating through the UI
Help doesn't help: If you add a link to a help page, not many people will even read
it, and just ignore it, mostly because it doesn't help them anyway. One thing that you
should do is try to make it so your users never need the help file.
Assistance in the UI: In order to get your users to not need the help file, add
descriptions and better explained headings and other things in the UI so that it is easier
for your users to find the information, and understand what they need to do instead of
having to leave the current page in order to look for the help file. One thing you could
add is a preview box for adding filters to an image. Also have easy to see and use Undo
buttons so they can get back to their original state if they are editing an image.
Dialog boxes: Dialog boxes pop up all over the web on multiple websites and to most
users, they are annoying, so they click them away. Before you make a dialog box, challenge
it existence by asking these question: Should I have made this decision for the user? Is
this warning necessary? Would redesign prevent this error?
Error messages: Instead of having an error message that the only option is an "ok",
try redesigning them to be more meaningful or remove them if necessary.
Using graphics: When you add photos or other graphics to your site, make sure that
they are important for comunication and not decoration. If they are added and not even there
with a purpose, then it will slow down the user, and distract them from their current task.
Designing for Delight
Attractive things work better: When sites are designed pretty and bright, they have a
better chance of working, because that means that they were designed well and were worked on
with a lot of effort. There also three things that also describe a sites attractiveness:
Visceral: the sites appearance; Behavioral: how the site behaves and works; Reflective; what
kind of reflection does it give the user about the designer when they are done with it.
Fix small annoyances: If small annoyances pop up in your design, then if you fix them
when you find them, then you can prevent any bigger problems that might arrise.
Create big differences: To create a big difference in your site and possibly future
sites too, take something that is small yet growing in popularity or even something that
everyone hates doing but needs in their sites, and create something that
everyone can use with confidence that it will work.
Design for delight: When designing your site, design it to be different than most
other sites by designing for people to take it in, and be delighted by it. Add a little
something unexpected yet not overwhelming to help give your users a fun time visiting your
site.