As designers we have to be aware of the function of our work and design as much as we care about the aesthetics and visuals. There are a lot of terms for the design of how the site functions and works, from “usability design” to “user experience,” what remains constant is that if we want to become better designers we have to pair these two concepts together.

Using clear and effective design laws as guides we can use proven formulas for better design. These laws both assist in the usability / experience of our design as well as the aesthetic values. Furthermore being able to refer and cite these laws when presenting or discussing design you can further establish yourself as a expert with justified reasons for your design choices.

1. Hick’s Law
Hick’s law states that with every additional choice the time it will take for one to make a selection increases. This means that the more options a user has when using your website or web application the more difficult it will be to use. This law really speaks the importance of simplicity.

The classic case study for Hick’s law involves a grocery store which put out free jam tasting for customers. In one case they had 40+ jams to sample and choose from, and in the other only a few samples. What they discovered is that customers purchased more jam when presented with three to four options over the forty plus. Most customers opted not to purchase jam at all rather than pick from such a large selection.

What this means for us designers is that we should minimize the amount of choices a user has to select from. Removing any unnecessary pages, links, buttons or selections will make your designs much more effective.

Read more about Hick’s Law.

2. The Pareto Principal, or the 80 / 20 Rule
The pareto principal stipulates that a high percentage of users will perform a low percentage of actions. Meaning that most of your users are going to go to a small percentage of pages. Or in terms of web applications that most of your users will perform a small percentage of tasks.

Using this principal we can identify what that small percentage of actions that most of the users are performing (using analytics, research, interviews, etc…) We can then put higher emphasis on those tasks and actions to make the site easier to use. Sometimes this can lead to the inclusion of a new navigation, or altering the homepage to make finding and accomplishing those tasks easier.

This can also lead to the pair down and removal of content and features from a website. If the users are not accessing or using the information, then you can improve the site by removing it. This ties into Hick’s Law and Occam’s Razor.

Read more about the Pareto Principal

3. The Rule of Thirds
The rule of thirds is a method of composing elements to be visually pleasing in addition to identifying ways that users eyes will scan across the page. Photographers have been using this principal for years to create more visually interesting compositions.

The rule of thirds is used by breaking up a design into thirds both vertically and horizontally. This builds a grid of intersecting lines. The rule states that a viewer is more likely to be drawn to the intersection of those lines. Additionally it is a good rule of thumb to place elements along the lines and intersections as well as avoid placing anything in the dead center of the composition or have a horizon diving the composition in half.

Placing elements so that they take up 1/3rd or 2/rds of the space will be more visually pleasing to most viewers.

Read more about the Rule of Thirds.

4. Proximity
The law of proximity is often neglected, even by experienced designers. This law states that elements that are near each other will appear related. This sounds like a very simple and obvious law but it is so often overlooked.

What this means is that you must be very aware of how much space you are placing between elements with in your design. If you have a series of elements that are too close together, users will assume that this was done so on purpose and that those elements are related. This is often an issue with web applications, where buttons or controls are grouped together yet have unrelated functionality. The result is that users get confused when trying to use and understand the application.

For example a search button that is too close to a save and cancel will likely get the assumption that the search is related to saving or canceling. Some users may think that the search is for searching previous versions of your work or that it is specific search for help, etc…

Proximity should be used carefully as it is extremely powerful. One simple example of good proximity use would be placing headlines closer to the paragraphs they are related to them than the paragraphs previous. You can look at the headlines in this blog as an example.

5. Feedback
Feedback is a concept that industrial designers have mastered for decades. Feedback is giving a user clear indication that something has happened, is happening or could happen. This communication is essential in the design of many products, consider a coffee maker that didn’t have a light indicating it was on. You would probably be burning coffee constantly!

Since users interact with our sites and applications we need to be aware of providing adequate feedback. This means providing loading bars, hover states on all links, using the visited link property, :focus states on form elements and :active states on links.

Sometimes designers will neglect to have hover states on links out of laziness. However it really does improve the usability and quality of your design.

6. Fitts’ Law
Fitts’ Law can be described as “The time required to move to a target is a function of the target size and distance to the target.” We can apply this to web design by looking at the hit area of our objects. Meaning the larger we can make the clickable area of key links and navigational elements the easier they will be to click on. Remember that while as web designers we may be extremely proficient at using the mouse and the web, there are a lot of users who still have trouble with these basic functions.

A common misuse of Fitts’ law is when a design is coded so that the text of a menu bar is clickable but the tabs themselves are not. Rather than just making the text clickable it would be a great idea to add padding to that link element to increase the clickable area. Sometimes this means turning the anchor into a block level element and wrapping details inside.

This can work in the opposite way as well, meaning items we want to be difficult to be clicked on (such as cancel buttons / links) should have a smaller clickable area. This is why you often see forms or actions that have large “save” buttons but text based “delete” or “cancel” links. WordPress uses this law extremely well.

Read more about Fitts’ Law.

7. The Golden Ratio
The golden ratio is often confused with the rule of thirds, but make no mistake they are different. The golden ratio looks at what proportions are naturally most visually appealing. This ratio has been used in design, architecture and engineering for hundreds of years. It even has been tied to what features we find most attractive in people (both facial features and body types).

The golden ratio can be described as a ratio with in the elements of a form, such as height to width, approximating 0.618.

When applied to rectangles you can continue to create smaller disections of the shape using the .618 ratio, which creates a natural spiral pattern. This can be seen in nature by examining sea shells.

This ratio has been used through out history, in everything from the craftsmanship of violins to the design of the Parthenon and Stonehendge.

It is unlikely that some of these items were created with the golden ratio in mind, rather the creators likely preferred the visual appeal of the design when using these ratios.

Ultimately the golden ratio is more likely to produce visually pleasing compositions.

Read more about the Golden Ratio

8. Occam’s Razor
Occam’s Razor put simply, states that “the simplest solution is almost always the best.” With the flexibility and power of the web and our design tools, it is easy to get carried away. The result is a very complicated site or design that may have a lot of functionality and information, but is difficult to use, build and maintain. Despite the fact that one might think the site can do more, it actually accomplishes less.

This is commonly an issue where companies feel the need to put everything they possibly could up on the website in the rare case that someone wants the information. What gets ignored is that the overwhelming majority of the users will access about 20% of the content on the site (see the 80/20 rule earlier).

Being ruthless about the value that a page or piece of content provides and removing anything that is unnecessary will make significantly stronger and more effective designs.

Additionally this rule speaks to the age old saying that “A design isn’t finished when there is nothing more to add, but when there is nothing left to take away.” Design simplicity is elegant, sophisticated and much more effective than the complex decorative style that is so prevalent on the web these days.

Read more about Occams Razor.

9. Fibonacci Sequence
The Fibonacci Sequence is a series of numbers in which each number is the sum of the preceding two. For example if you started with 1 it would go like this:

1, 1, 2, 3, 5, 8, 13, 21, 34, 55, etc…

This is significant as it has been found in many classical creative works, is found commonly in nature and is often used in addition to the golden ratio. Patterns based on the sequence are intrinsically aesthetic and therefor should be used in the composition of our designs.

This sequence can be used to create visual patterns, create shapes, organic figures, build grids or dictate sizing and ratios. The Fibonacci sequence is considered to be one of the most influential patterns in both mathematics as well as design.

Read more about the Fibonacci Sequence

10. Mental Models
The Mental Model law states that it is significantly easier for users to understand and learn something new if they can model it off of something they already understand. This is why the concept of tabs works so well and why operating systems are modeled off of real world office situations (folders, files, desktop, etc…)

We can use this concept in making our designs easier to use as well as more effective visually. There are times where it would be effective to model our designs off of real world situations or objects. Consider designs that mimic desktops, papers or offices. Users can learn, understand and draw meaning from these types of designs because they can relate it to their understanding of the objects in real life.

Use the Laws, Design Better
Are there any laws or design principals that you use when crafting your designs? I would love to hear about them.

Kinect

One of the most challenging and rewarding things about working on the ESPN on Xbox team is dealing with multiple user interface models. No longer are users confined to using just the good old Xbox 360 controller. There is now the media remote and the amazing new Kinect.

Designing for the Kinect has been nuts. The difference in restrictions and advantages the Kinect offers are endless. At every turn we must ask ourselves if it is working in all three interfaces and whether or not we need to sacrifice usability in some areas for others.

This balancing act brings something to the surface though. It challenges us to make an interface which is truly usable, simple and understandable. It’s going to be fun watching all of the different applications utilize the Kinect in different and innovative ways. Check out the new Xbox 360 dashboard for the latest and greatest.

Just thought I would share this video. It’s pretty amazing, try pausing it at any moment. Frame by frame it totally looks like its hand painted.

I was hired on as a “2D Production Artist” but have been doing everything from comps to UX flow design. I’ve created bumpers for advertising, designed a new bottom line ticker and contributed to a lot of behind the scenes stuff too. The amount I am learning from this job is astounding, it’s also nice to work with such seasoned professionals.

Anyways we released our new ESPN 2.0 back on August 25 and its been going strong ever since. Look for an update to my portfolio in the near future which features my new work on this application.

Check it out!

Taco Bauer – Ungraded from John Bradley on Vimeo.

Taco Bauer from John Bradley on Vimeo.

It was pretty time consuming getting the muzzle flashes, lighting and casings but it was totally worth the effort.

Inhale from John Bradley on Vimeo.

We were filming an “Intro” type video for my video production team class that featured this doll being kidnapped and us saving it from an explosive situation. The shoot was fun and turned out pretty good. Afterward while some other class mates were editing the video we thought we would shoot baby doing some not so baby things. Ended up just sitting outside having Eric take a smoke break with baby. Too funny, the cigarette fit perfectly in the baby’s mouth. I really liked the lighting for these shots. Just bright enough and soft enough but still able to maintain some nice deep shadows. The footage is really shaky though, I forgot to bring my shoulder mount but its still a pretty fun video.

Shot on a Canon T2i with a Nikon 50mm f1.8 lens.
Edited and graded in Adobe Premiere Pro.
All video shot at 1920×1080 30p

Ridin’ Low in the 3-6-0 from John Bradley on Vimeo.

Short video of this years “Ridin’ Low in the 3-6-0″ Lowrider show at Western Washington University.

Shot on a Canon T2i with a Nikon 50mm f1.8 lens.
Edited and graded in Adobe Premiere Pro.
Music: Bien, Bien by Control Mechete
All video shot at 1280×720 60p

Skywalker Ranch from Philip Bloom on Vimeo.