Photographic images grab our attention and trigger an almost instantaneous response when we encounter them. They are therefore an important part of any website we create. Photos play a significant part in determining our first impression, but they can also tell us what the site is about and can be a huge factor in earning trust.
When used properly, photos are very effective and can quickly send the intended message to your audience. However, using the wrong photos can degrade your users’ experience. How do we choose the right ones?
A reminder to myself of some well known User Interface Design Rules.
- Lack of consistency leads to errors
- People will make errors, so make the system insensitive to them
- Design task flows to yield closure
- Minimize short-term memory load
- Visibility: First step to goal should be clear
- Affordance: Control suggests how to use it
- Feedback: Should be clear what happened or is happening
- Simplicity: As simple as possible and task-focused
- Structure: Content organized sensibly
- Consistency: Similarity for predictability
- Tolerance: Prevent errors, help recovery
- Accessibility: Usable by all intended users, despite handicap, access device, or environmental conditions
- Focus on the users and their task, not the technology
- Use users vocabulary, not your own
- Think “outside-in,” not “inside-out”
- Design for responsiveness
My notes from the book Designing with Mind in Mind by Jeff Johnson
- Our goals affect perception
- Users come to a system with goals they want to achieve
- Our vision is optimized to see structure
- Design mistake, many interfaces present too much text, requiring users to read more than is necessary
- Minimize the need for reading
- Our brain pays less and less attention to any stimulus that occurs frequently
- Don’t require people to require system status or what they have done, because their attention is focused on their primary goal and progress toward to it
- When words are memorized, often what is retained is the concept, rather then the exact words
- Designers should avoid system that burden long-term memory
- We focus on goals and pay little attention to our tools
- When people refocus their attention on their tools, it is pulled away from the details of the task
- The software applications and websites should not call attention to themselves; they should fade into the background and allow users to focus on their own goals
- People are willing to type more in order to think less
- Goal, Execute, Evaluate
- Allow users to back out of tasks that didn’t take them toward their goal
- The goal-execute-eveluate cycle interacts strongly with short-term memory
- Attention is a very scarce resource; our brain does not waste it by keeping it focused on anything that is no longer important
- The human brain was “designed” through millions of years of natural selection and evolution, to recognise things quickly
- The larger the number of people who will use a function, the more visible the function should be
- When people make a mistake, they don’t always learn the right lesson from it
- Interactive systems should minimize the amount of attention users must devote to operating them, because that pulls precious cognitive resources away from the task a user came to do
- In most development efforts, there is pressure to add extra functionality “in case user might want it”; resist such pressure
- Software designers should just aim for the simplest conceptual model for the required functionality
- The operation should be based on users goals and tasks, conceptually simple, and consistent
- The vocabulary should be familiar to users, based on the task of the domain and consistent
- Provide low-risk environment in which errors are difficult to make, and when users do make errors, they are easily to correct
- Keep users informed about the status and don’t make them wait unexpectedly
- A system responsiveness is measured in terms of compliance with the human time requirements and satisfaction
- Responsive systems keep users informed even if they cannot fulfill the users request immediately
- If an interactive system takes longer then 0.14 second to respond to your action, you won’t perceive your action as having caused the response
- Duration of unbroken attention to a single task (“unit task”) is about 10 seconds
- People who design interactive systems are engineers, not scientists
- We just have to design interactive systems that work for human beings
- "Instantly" means within about 0.1 second
- If software waits longer then 0.1 second to show a response to users action, the perception of cause and effect is broken
- 10 seconds is the approximate unit of time into which people usually break down their planning and execution of larger tasks
- Software should display a busy indicator for any function that blocks further user action while it is executing, even if the function usually executes quickly
- The deadline for displaying a progress indicator is 1 second
- Show work remaining, not work completed
- Show total progress, not progress on the current step
- Show percentage, start with 1% because 0% can get stuck and user might feel worried
- Show 100% only at the very end of the progress, for same reason above
- Use human- scale precision, not computer precision (about 4 minutes)
- Display the image quickly in low resolution and then re-render it at higher resolution
- Web or database search; display results as soon as it finds them, while continuing to search for more
- Work ahead of users when possible
- Software can use periods of low load to pre-compute response to high-probability requests
- Interactive systems typically spends a lot of time waiting for input from the user. Don’t waste that time!
- Achieving responsiveness is important
- It is a design issue, not just an implementation issue
This has been a very nice read. I recommend buying this book and reading through all the sections and research findings provided in the book. It will help you a lot when making critical decisions when designing your next interface.
"I just found a Norman door, it was really difficult to use" - sounds familiar? It is a popular quote from the book "Design of everyday things" by Don Norman.
So, I went into this building and needed to go to 14th floor. I came to the elevators (6 of them, 3 on each side) and wanted to call one. I couldn’t find normal controls like you see on normal elevators these days, instead I was introduced to something that looked like a phone keypad. It looked like this:
I was confused at first, I thought maybe this is something for employees of the company to enter their special code or something. Notice the “star” button? What the heck is that!?
On the display it said: “Please enter floor number”. I “typed” 1 and 4 and the message on the display changed to something: “Elevators to come A, B..” - and I don’t remember after that because the message quickly disappeared and returned to default state. I was confused but….
Eventually, one of the elevators arrived and I stepped inside. To my surprise inside the elevator there were no buttons or controls at all. I was presented with this:
Nevermind, I was on my way to 14th floor.
After the meeting I had to go down of course :) I pressed number 0 on the left keypad and again display showed some message very fast and disappeared, and in that very moment one elevator just arrived on the other side (right). I turned around and entered that elevator, door closed and …. nothing happened. I was trapped inside! Since there were no buttons to choose to which floor you want to go, I couldn’t do much. Eventually I found a small tiny button that looked like if pressed the door will open. It did, I was free again!
What really happened here is that this wasn’t my elevator for the ride as I “the genius” figured it out, because the message on the display told me which elevator I should take or expect to come, since I was using the keypad on the left side. Elevators were marked with letters from A to F, and coincidentally the moment I pressed 0 on the left side, elevator came on the right side. Since the message on display isn’t really readable (except you’re super duper mega uber fast reader) I couldn’t tell I was wrong until I was trapped.
And finally, I figured out how this “state of the art modern” elevator operates and found my way out of this building.
Imagine you work in this building. You must go to 14th floor and on your way back to ground floor, in the middle of your ride you decide to stop by on 8th floor to visit your colleague. Normally you’d quickly press number 8 and elevator would stop there and you can step outside. Unfortunately that ain’t gonna happen with this one :)
This elevator design probably won several prestige awards for the design of the century in whole universe or something like that.
Till next time when I return with more DOET stuff ;)
Safari>Preferences>Privacy>Remove All Website Data
You’re welcome :)