133. User Interface Design: Step-By-Step User Interface Workshop

12 important lessons from this lecture:

00:00:26 Most developers know usability is a key point when it comes to making interfaces. They understand the necessity, but often times don’t know all the methods and techniques available to achieve this.

Top 10 usability rules

00:00:48 There are tons of guidelines out there. Through experience, my (Janne Jul Jensen’s) top ten imperatives to good usability include:

1. Simple and natural dialogue – this refers to the natural language of the user not the computer the user is using.
2. Speak the user’s language – speak your user’s language concerning their area of expertise;not yours.
3. Minimize memory load – People are horrible at remembering stuff. Use software such as cookies so the user’s computer will remember for them, but don’t make your user have to remember themselves.
4. Use constructive error messages – If a user makes a mistake, or clicks on a broken link, etc. Don’t give the user useless information, and don’t tell the user ‘an error occurred.’ That’s obvious. Instead, tell the user why it occurred (if necessary) and what they can do about it.
5. Support recall – It’s a lot easier for humans to remember something from the past than they are having to remember something out of thin air. Give your users a finite amount of choices, and they’ll recognize within the choices you give them what they’re looking for rather than giving them a free text field that they have to fill out on their own.
6. Make clear exits – Never get the user into a corner where they don’t know how to get out of. When users can’t figure out how to correct errors, or return to the previous page within your website or application, they look outside of your website to correct it, such as the ‘back’ button on the browser they are using.
7. Make shortcuts – CTRL+C; CTRL+P; etc… Everyone uses shortcuts. Shortcuts are brilliant because they cater to your expert users without bothering your novice users. Novices generally don’t start discovering shortcuts until they are ready to start using them.
8. Give feedback – Always keep the user informed because they don’t have faith in computer systems. Tell users when something goes wrong (error messages above) and tell users when something goes right. If the user isn’t aware that a software update has been ‘installed successfully,’ they will assume it wasn’t installed. Likewise, tell your users how far into a process they are: 10% complete; Step 4 of 5; Approximately 3 minutes remaining…
9. Prevent errors – Anticipate errors so that ideally you never have to use constructive error messages above.
10. Thrive for consistency – Humans tend to pool on what they’ve learned in the past, so make sure that what users have learned in the past through experience also applies to your software, website, application, product, etc. today and in the future because when faced with a new product, that will be the first thing users will try and do. For example using gestures on tactile devices from software to software and platform to platform.

[EDITOR’S NOTE: With regards to #4 above, in my interview with Art Director Julien Chesné, he points out that advertising (equally applicable to user interface) is made for consumers; therefore consumers do not have misconceptions. If consumers think what you created is bad, is deceptive, or is doing more harm than good, they are right. Consumers have opinions based on experiences and prejudgments, and it is up to you to either conform to those preconceived opinions or work to change them.]

00:06:52 A client may eventually come into your office with ‘an idea for a smartphone application,’ and that’s all the direction they can give. So what are you going to do?

Method 1: The Creative Design Workshop

From the very beginning of your project before any code is set into place, a creative design workshop should be organized for your client’s designers, domain experts, users and developers to identify the purpose of their application’s user interface and to get everyone involved with the design process on the same page with regards to user interface.

This involves organizing the people into groups of 3-4 and using markers, paper, and scissors to put everyone in the client-company on the same playing field and allows you to discover:

• The client’s domain
• The kind of client the company runs
• The users they have
• The inner workings of the client
• Their needs, wants, and objectives
• Design ideas for the application or website they ‘have to’ have

Next, define the project objectives:

• What are you making?
• Who are you making it for? (see method 2 below)
• Why are you making it?

As this activity will be something adults aren’t used to doing, you will need to be a good facilitator and even may need to take the initiative. Pick up a crayon and create the first design of what you understand their idea to be, and then invite the person to take the crayon from you and improve your drawing.

Familiarize the client groups with the platform(s) their application would be used on (tablet, smartphone, website, expert system, etc.) so they are all on the same page with regards to functionalities.

“No rules, no limitations, no budget constraints… What would you create?” Make sure the client sees possibilities instead of limitations. Watch your, and their language to ensure ideas aren’t being shot down before they’ve even had the chance to be born. Be careful with any ideas you do shoot down. Creating too many limitations will cause people to shut down, feeling as though they have nothing more to offer.

Have each 3-4 person group present their ideas to the other groups and then let the groups brainstorm their individual ideas into one solution that meets the objectives of which they all contributed to emerges as the winner.

00:11:37 This method works well because:

• Everyone in the group knows how to use scissors, paper, crayons, markers, etc.
• The pictures they create say more than a thousand words can
• There are no computers and technology involved, thus leveling the playing field between the tech-savvy and the non tech-savvy
• Each group member can equally contribute their expertise and experience from their own field
• Each group member can also equally benefit from each other’s expertise and experience
• The results from this workshop are concrete and can be physically seen and thus challenged and improved

00:14:07 This method’s results include:

• Creative design ideas
• Potential problem areas to address during idea validation and during th development phase
• A better understanding of the client’s domain
• A hightened engagement from all participating parties
• Shared ownership of the solution

[EDITOR’S NOTE: Recall during my interview with Lisa Ward, Senior Account Manager that because the digital world is so fluid, it’s easy to be misconstrued as being instant and even disposable. That there is a belief that digital projects can be turned around very quickly and often on a very little budget. Having to tell a developer – who’s maybe 90% of the way through a complex site or app build – that we’re changing something quite fundamental in the project is an inevitable reality in such a constantly shifting landscape. This is why it is imperative to take the time to thoroughly ‘understand the client’s, and more importantly the user’s needs’ at the beginning of any project.

Also, recall from the lecture Human Resources Management: Software to Manage Your Entire Company by Armin Trost that expert-systems are extremely difficult to use and require formal training to effectively use it: HR software, Photoshop, Microsoft Excel… while user-systems are consumer-facing software which have an impeccable and intuitive user interface which the average person can use immediately and without any required training: email, facebook, twitter, learning portals…]

Method 2: Identify the End-User

00:15:12 Just because your mom wouldn’t be able to use the user interface doesn’t mean it isn’t a good user interface. If your mom is the target consumer, then you have a problem. But perhaps your mom doesn’t fall within the target demographic.

Common questions to answer to identify your typical end-user target user are:

• Who is your latest user?
• What stereotypes would your users fall under?
• What are their age groups?
• What is their technological level of expertise?
• What is their gender?
• What is their occupation?
• What is their univeristy degree? (if relevant)
• What kind of car does s/he drive? (if relevant)
• What is their ‘life motto?’
• What is/are their personality type(s)?
• Is what you want to create for them something they would ‘have to’ use (work-related) or something they would ‘want to’ use (hobby or vacation-related)?
• How often would they use your product?
• On which platform(s) would they use to access it? (phone, tablet, laptop…)
• What do they all have in common?
• More?

Bundle ALL your diverse target consumers into: 1 primary target individual persona and 2 secondary personas complete with a representative CV/resume, name, photo of a stereo-typical user from this target demographic. Doing so allows you to personify your target consumer(s) so you can then begin solving problems they face in life.

[EDITOR’S NOTE: For more great information and questions on how to identify your end user(s), check out my interviews with Ivan Pejcic, Strategic Planner and Peter Spear, Brand Listener.

Also, for a great template on how to create a ‘user profile resume’ similar to the one Janne mentions, read the excellent book Copywriting: Successful Writing for Design, Advertising and Marketing by Mark Shaw.]

Method 3: The Design Process

00:20:01 Now that we know what we are making and who we are making it for, we are now ready to begin designing our application. Re-coding after you have already begun coding is extremely tedious, time-consuming and annoying, so you want to do as little re-coding as possible. To avoid re-coding requires you get as specific as you can be BEFORE you sit down and start coding out your idea:

Step 1: Sketch Wireframe

Begin by sketching with pencil onto paper everything you plan on doing: the user journey flowchart and wireframe: appearance, colors, dimensions, etc.

(photo from here)

Step 2: Computer-Generated Wireframe

Once you’ve created a rough sketch, then go onto your computer and create a rough draft using photoshop or microsoft paint, etc. Doing this allows you to really see what your idea would look like when presented on a computer and how it will operate. It also allows you to see the sizing and spacing of the font you use, as your handwriting will not provide an accurate rendition, and it allows you to make sure that there are no dead ends (error messages) in your application where the user may find him/herself stuck and unable to get out.

Step 3: Icons & Graphics

Once your client has signed off on this computer-rendered version of the application, your next step is to start creating the graphics which will appear within the application. This is important to do before you begin coding because the size, shape, colors, shadows and rounded edges of these little graphics will dictate how everything else is laid out in the application. Changing the size or color of a graphic later in the process will result in a lot of tedious re-coding.

00:22:37 Once all of the above has been signed off by the client, now you begin coding the application.

Step 4: Navigation Card Sorting

00:24:20 Card sorting involves placing titles and topics for your application onto flashcards and then ordering and grouping them to create what will become your navigation menu and website flowchart. Card sorting might not be necessary when dealing with a small application, however will prove extremely useful for larger projects and navigation and sub-navigation menus such as for websites and software programs.

(photo from here)

To make card sorting work most effectively:

1. Ask one target user control group to organize all of the flashcards into as many groups as they feel comfortable with, and then to name each group of flashcards they create.
2. Next, take the group names from the first control group and ask a second control group to again organize the flashcards under each group name. If the second control group matches with the first control group’s, then you have a relatively intuitive and easy to navigate menu. Any inconsistencies between control group 1 and 2′s grouping lets you know that perhaps you may need several different ways for people to find the menu option they are looking for.

The more complex your menu bar becomes, the more time you should invest in card sorting:

 

(photo from here.)

00:32:10 Build with what users are already familiar with. Don’t reinvent a completely new online shopping cart that users will have to learn when you can simply use what has already been created and works perfectly fine.

Don’t aim to stand out from the crowd, and your competitors, by creating something completely new that users don’t understand – don’t be remembered as ‘that one website that nobody can navigate,’ stand out from your competitors by having a really nice graphical design, the fastest checkout experience, the best content, etc.

[EDITOR’S NOTE: Conversely, in his talk How to start a startup: The importance of finding your idea & product, Sam Altman points out that as a startup you eventually want to build a business and/or product that is difficult and/or extremely expensive to replicate. That way your more extablished competitors cannot easily copy you and run you out of business.

For more ideas on how to stand out from your competition, check out my interview with Art Director Julien Hérisson on advertising generic products and identifying your unique selling proposition.

For more information on best practices, read the book Best Practices: Building Your Business with Customer-Focused Solutions by Arthur Andersen, Robert Hiebeler, Thomas B. Kelly and Charles Ketteman.]

Step 5: Progressive Disclosure

00:34:17 Many systems and websites are so large that if you present everything to the user at once they will become overwhelmed, so you need to start the user off using baby steps which allow them to begin exploring your website at a speed they are comfortable with.

00:37:03 Upsells and ‘buy more’ is a normal and expectabe part of the ecommerce checkout process consumers are familiar with. Just make sure you group all of your upsell offers into one section and make it obvious to the user that they are in the upsell part of the checkout process, and allow them to quickly skip over parts of your checkout that don’t interest them.

Mixing product sales and upsells, you run the risk that:

• Your client may become overwhelmed and abandon their shopping cart. (Ex. On an online flower bouquet shop, have 1 page to choose the flowers, 1 page to choose extras such as red wine or chocolate, and 1 page to design a custom card rather than having all of that on 1 long page.)
• Your client may feel like you are using deceptive dark patterns and trying to manipulate them into buying what they don’t want.