Summary of Kevin Hale’s (@ilikevests) @platzi course: The 5 Laws of Interface Design

I Joined Platzi to view Kevin Hale: The 5 Laws of Interface Design

Platzi is a YC company & Kevin is a partner at YC & cofounder of Wufoo.

Each video breaks down pages and pages of UI research into 5-minute chunks.  But who has time for that!? So, here are some high-level notes from the course:

#1: Fitt’s Law

Kevin shared this fancy formula:

Screen Shot 2015-03-13 at 11.59.21 AM

Um, yea, I’m not a mathematician.

But this is what this formula gets at:

“If something is really small & we make it bigger, it makes a big difference, but if two things are already pretty big, it makes less of a difference. It is diminishing returns to the benefits gained….so focus on improving the tiny things to get the most return.”

How does this relate to interface design?

Simple.  The size of buttons can be set to help facilitate user interaction and make it easier to click on them.  Here is one example he shares:

Screen Shot 2015-03-13 at 12.06.19 PM

See how, by changing the height of the button, the user has to travel less distance with the mouse to activate that choice? Math sure is a wonderful thing!

So when designing menu items, it is important to think about where the cursor is mostly going and if the user needs to mostly move up/down or across the screen to get there. This will impact how you shape and resize buttons to make things easier for people to click on.

#2: Steering Law

Yet another fancy formula:

Screen Shot 2015-03-13 at 12.19.58 PM

The speed at which a person can move through a tunnel depends only on the length of the tunnel and the width of the tunnel.

The shorter the length, or the bigger the width, the faster you can move through a tunnel.

Wider paths = Faster movement.

Let’s apply it to Interface Design, specifically the rollover menu:

kevin-hale-laws-of-interface-design-nested-menu

Notice that the choke point slows the user down to get to the sub-menu.

#3: Hick’s Law

Here’s the formula:

kevin-hale-laws-of-interface-design-hicks-law

This makes sense, as the brain has more inputs to decide from. I would assume the words “decision fatigue” come up somewhere in Hick’s research.

This is best for attention optimization (i.e. alerts) and helping users through a step by step process. So, to make the item you want people to identify or interact with very apparent, you should limit the number of options available, or call attention to the item through visual cues.

I think this law also supports the reason why most landing pages perform better with one single call to action than with multiple interactive elements.

(reference: The 7 Principles of Conversion Centered Design)

#4: Miller’s Law

No formula! Just the answer to this important question:

What is the capacity of short-term working memory?

This question is important because, as interaction designers, we need to work within this memory limit to make it easier for users to learn and move around a website or app.

Here is the answer:

kevin-hale-laws-of-interface-design-chunks

Our brain is a machine that recognize patterns, chunk things together & then process the chunks to gain understanding. According to Miller, our minds can easily process somewhere between 5-9 chunks of information at any given time.  Any more than that and our brains are overloaded.

So to better communicate with users, we should divide the web interface into chunks. This is very helpful for forms and processes that require multiple steps.

#5: Power Law of Practice, Practice, Practice

One last formula:

kevin-hale-laws-of-interaction-design-power-law-practice

All you have to know is that the time it takes for a user to finish something is dependent on the number of times you’ve done it before. You will get faster because your brain needs less power to think about the action.  So practice, practice, practice will turn an action into a habit.

This law has a big impact on how designers can influence repeat performance.  We should aim to leverage the patterns that users are already comfortable with, rather than creating new patterns!  Here is where resources like pttrns.com and uxarchive.com come in handy.

The one caution here is that users will get faster at both good actions and bad, if trained to.  So you want to implement ways for the user to backtrack or undo if they make a mistake.

Summary

kevin-hale-5-laws-interface-design-summary

“To make better interfaces you want to make the things you want to click on bigger, the paths as wide as possible, use as few items as possible, chunk things together, and optimize for repeat performance.”

(Please share this if you thought this was helpful. Feedback appreciated.)

(all images courtesy of Plazi & Kevin Hale)

4 comments

  1. Pingback: Summary of Kevin Hale’s (@ilikevests) @PlatziTeam Class (founders: @cvander @freddier): Interface #Design for #Startups by @ak310i | Two Start-ups & A Baby

  2. Pingback: Recap of Kevin Hale’s Platzi Class Interface Design for Startups | Two Start-ups & A Baby


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s