These are the smallest unit of interaction that are caused by a trigger – either by the user, system, another user, data recognition, etc.
Help users recognize how to trigger something and what is triggerable that will result in an interaction. A button is a trigger. A glowing button is a more obvious trigger. Sometimes triggers are invisible, but there can be clues to suggest the interaction (these must be thoughtfully designed).
Make sure triggers are consistent. A 3D button sets a filter on this page. A second does the same. The third leads you to another page? These are all 3D buttons of the same attributes so users will think they have the same effect.
Triggers can incorporate the data behind them. For instance, a badge notification tells the user something.
Always keep in mind affordance. A 3D button should be clickable and produce an effect.
If the user has to keep triggering, make the trigger more visible. For instance, the “Publish” button can be stuck to a “frozen” header so that no matter where the user is in their canvas, they can publish right then and there instead of scrolling up.
A label can be useful for a trigger if the info isn’t conveyed through the trigger. The “shake” gesture on an iPad is often non-intuitive. If it has an effect, you may need a textual label that says “Shake”.
One of the main fields in cognitive psychology is memory – how we’re so bad (or good) at it. Humans can only memorize a little bit in short-term memory before it goes away. Chunking helps with this, which may be why phone numbers are split with 3 digits and then 4 digits. See the whole mess of 7 numbers 34729523 is harder to visually sparse. When we break wholes into meaningful units, we can memorize a lot more than usual too. So, 07-04-1976 may be easier to remember when seeing it as a single chunk – the declaration of independent, rather than an equal number of digits 38-94-7204 which likely has no meaning. Chunk when possible.
We also keep stories and songs as a single unit in memory. Ask a musician to start singing from the third verse of the song. They might struggle. Ask them to sing from the beginning and it’s easy. It’s because the musician didn’t memorize it based on various elements, but knows the song as a single chunk (or possibly a few chunks).
Making up your own security questions will result in more accurate entries than default security questions. For instance, they always ask who my favorite teacher in school was. Well, I usually put Shimmon or Spellicy but I can’t be certain which one I’d put. And what about case-sensitive? If I make my own, I tend to use a coded phrase anyways such as “last attack 2nd abra” which translates clearly to me as “What is Kadabra’s last attack?” which was a favorite trivia question growing up for me.
When you give instructions, especially long ones with multiple steps, don’t ever make them go away. Don’t force the user to take a screenshot because the instructions will disappear. Users can’t and don’t want to try to memorize anything. Make it easy for them!
Be mindful and understand what components, widgets, and archetypes are! Look up design patterns online for how users are accustomed to using these all and how they are laid out. Nothing is absolute, however. Make sure you don’t just pick out things you like about one pattern and another pattern and another pattern. It doesn’t necessarily create the best solution in the end this way.
Components – these are the smallest unit of interactivity.
- checkboxes, radio buttons
- field boxes, combo box
- scroll bar, sliders
- icons, buttons
- toolbars, tabs
Widgets – usually consist of a combination or blend of components to create a whole
- They can be wizards.
- Enterprise products often have hierarchical grids (tree control).
- Forms, lists
- Feed (facebook) and timeline
- Filter panel
- Shuttle controls are common in enterprises. It’s a list – sometimes hierarchical – with another list. There’s left to right controls to add/remove items for instance. There’s only a few times where shuttle controls would be needed but it’s generally not in products anymore.
- Login (two field boxes and a submit button, “Forgot Password?” link)
- A dialog box by itself is even a supporting widget.
- The date picker on a calendar.
- shopping carts (metaphor)
- menu pages/headers
- Master-Detail, such as an email inbox with preview messages
- shopping catalog
- portals (where content is aggregated)
- search results
- tool and canvas (see PhotoShop)
- workspaces (often for coding)
…with practice of course. Know what tasks or actions the user will make frequently.
…when it’s task-based. Present a clear goal and have users complete step by step. Let them know where they are in the process!
…when risk is low. Undo buttons allow for more exploration. Maybe this could be a button that says “Undo” or “Reset”. If this is a clear action the user can trigger, this can eliminate any stress the user has to go through when they think “am I doing the right thing?” or “what if I’m filling this out wrong?”
…when the vocabulary (terminology) is known. Be consistent with the terms you use! Even little things like “document” or “file”. Do they “set” it or “activate” it? Do they “close out the application” or “shut down the application”? People have general pre-conceived notions about these terms.
I take the Apple commute bus to and from work each day. One day, I saw my bus from far away. As I got on the bus, I did not recognize the driver, but that’s happened a lot of times before. As I chose my seat, I was hoping the bus wouldn’t get full and I would need to sit with someone. This almost always happens but didn’t happen that day. I also noticed that the back of the seats looked different. After 15 minutes, I fell asleep and was in and out. As we approached San Francisco, I looked up and saw we were in traffic and fell back to sleep. I didn’t recognize the house style that was outside. The bus hitting the first stop woke me up, as usual, and I looked up and realized I had been on the wrong bus – it lead me to the mission district which is a 20 minute drive from where my house is (and almost an hour for public transportation). There were so many clues to indicate that I was on the wrong bus and I dismissed them all. I thought I saw a blue “19” from far away on the bus dashboard, but it was a green “MD”. I wish there was some indication inside the bus that I can tell whether I was on the right bus, but I assume they don’t expect people to be so..foolish? This is cognitive dissonance. I was making every excuse to explain why the bus driver, the bus itself, how crowded it was, as simply “unusual” circumstances but never questioned I was on the wrong bus.
How often does this happen in user interfaces? Maybe you click SEND rather than DELETE (location of the buttons’ fault?). Sometimes you find yourself doing what you’re not intending to do. We love running on auto-pilot using just the primitive side of your brain. When we need to use that frontal cortex because you’re analyzing all the info coming into your senses, it makes it hard to multi-task. So there needs to be a balanced.
Consider each time you require your users to learn something, especially something complex. This requires the frontal cortex, analyzing stimuli, and synthesizing information. This can be stressful and draining. Allow users to go on auto-pilot as much as possible, but never lead them astray.
As users, we have learned behaviors and often do the same thing when we approach user interfaces. This is why consistency is so important in design. If you design something that looks like a field box with a scrollbar, expect users to tap into it to try to type.
Apparently, large images are the way to go. Ryan Battles outlines the how the use of images can affect customer decisions – to buy or not to buy? Bigger images usually meant greater conversions. Saloman, a snowboarding company, increased sales by 40% with these two designs. The above image is the BEFORE – it’s not bad. The above image is the AFTER – emphasis on large graphics.
One of the hardest things to do is to get users to subscribe or join. That’s where most of the site bounces come from. I personally hate filling out long forms. But even when it’s just email and password, we all get a little squirmish – “ugh, they’re gonna send me spam. what’s the point in giving them the email address?”
The Smart Passive Income Blog does a good job with getting users to subscribe. Not only do they simply ask for name and email, they give a friendly, casual blurb of what’s in it for the user. All of sudden, I don’t think they want something from me (my information) but they are giving ME something. This makes a huge difference, and apparently surged sign-up’s by 25%.