UI Principles & Techniques

Principle #1: Simplicity

When creating a User interface, you want to make sure it is a simple to use as possible. Using simple terms that the user will understand, short-keys and shortcuts are also useful and simple. The Interface should always be consistent, clear, and lucid.

Three techniques that help to support the simplicity principle are Consistency, navigation within the screen, and don’t create busy interfaces..

A great example of this principle and these techniques would be the screen of an iPhone. As an owner, the iPhone is extremely easy to use; it is clear, organized and consistent

Principle #2: Feedback

Alarms, alerts and notifications are great ways for the interface to inform the use of any changes. When a phone battery is low, the interface will light up, or even a notification will pop up to inform the user.

 Three techniques that help to support feedback are Word your messages and labels effectively, explaining the rules, and consistency.

An example of feedback would be the home page of the popular social network website Facebook. On the main page you can see all of your notifications for friend requests, current and up and coming birthdays, event invitations, and much more. Everything is clear and either highlighted in colour, or bold text. If you are every unsure of what the notification is for, you can hover the mouse over the image and text will pop up explaining what the alert is for and where it will take you once you click.

Principle #3: Reuse

With ease and clarity, external and internal components of the interface will be reusable. All behaviours should be consistent as well as the functions and purpose. When the rules do not have to be explained more than once, and the need to rethink steps, and go backwards is eradicated, the interface is reusable.

Three techniques that help to support the Reuse principle are to expect your users to make mistakes, navigation between major interfaces, and your design must be intuitable.

On Twitter, we see people reusing the interface on a daily basis. Many users are using the website hourly, and most by the minute. With its clarity, a the user can easily navigate between the home page, which is where they read people’s updates; and their personal page where they can read their own updates. Once you are taught how to use this interface, you do not have to be taught again, especially since the design doesn’t change after each visit.

Principle #4: Structure
The structure of the UID should be easy to navigate and well organized. The design should keep all related functions together and those that are un-related separate from one another in order to keep things well organized and simple to use.

Techniques of UID that support The Structure Principle:

• Human to Artifact
• Grouping functions effectively
• Navigation between user interface settings

The Apple iPod is the most commonly used MP3 player world wide. The iPod is a perfect example of how functions are grouped effectively. Immediately once the device is turned on it gives a list of options to choose from.

• • Music
  • Videos
  • Photos
  • Podcasts
  • Extras
  • Settings
  • Shuffle songs
  • Now playing

  Under each of these options gives you a variation to effectively navigate your iPod. The play and pause bottom are on the same side, the fast forward and rewind buttons allow you to change songs, also the circular dial allows you to navigate through your all your songs, the menu settings and control the volume settings.

  Principle #5: Visibility

  Everything should be easy to read and viewable for the user to effectively navigate through physically and logically. The combination use of illuminated lights, colors, icons and numbers helps the user easily build a mental map of how the device works and operates.

  Techniques of UID that support The Visibility Principle:

  • Group objects effectively
  • Don’t use busy interfaces
  • Visually appealing interface

  A good example of how simple and easy to navigate a user interface would be in a video game. The interface I’ve decided to use is Call Of Duty: Modern Warfare 3. As you can see this interface is very simple and easy to navigate in the top left you have UAV map that indicates your teammates and enemies, also the design of the map. The bottom left corner tells you what team is leading using score. There are icons that tell you the names of teammates highlighted in green and enemies in red, also in the bottom right hand corner what weapon you are using, also indicates how many grenades you have and specialty grenades(flash bang, smoke bomb etc.), ammo and any special perks. Directly in front of you are indication icons that tell you what locations to capture or plant a bomb by using letters A,B and C also which of those locations you are to defend from enemies.

  Principle #6: Tolerance

  The Tolerance principle of UID allows for the user to correct mistakes or errors. Programs that follow this principle gives the user the ability to undo or redo any mistakes or changes that are made by the user, which means that nothing is set in stone giving the user full control of the possible outcomes.

  Techniques of UID that support the Tolerance Principle:

  • Proper use of color
  • Expect mistakes
  • Set project standards

  A good example of a program that uses the Tolerance Principle effectively is Adobe Illustrator. On the left hand corner you have a variation of tools that give you many different options to effectively design or recreate media, by shaping, bending, angling and coloring the areas needed to create your design. The most effective and most commonly used tool in illustrator is the pen tool, which gives you most options when recreating or creating new art work. Also if you unsatisfied with a part of of your design, as you can see under the Edit option you can undo or redo, your last move or mistake and if you want to save time you can use keyboard shortcuts to maximize your time as you can see also in the drop down menu, it tells what keys can be used to use enact that option or feature.

Audi R8 Webpage

For my NEW MEDIA DESIGN course in the DMA program, our first assignment is to create a mock-up page for the Audi R8. This mock-up is to be done in a way that we would present to a client. This is the first time I have every created a webpage using photoshop. I have a blog but I was always just using the shitty templates that Blogger had to offer. For my first time I must say I’m getting the hang of it pretty well.

I made many changes when working on the Audi page and contemplated many different styles and ideas. I forgot to take a screen shot BEFORE I made this change. But, here is the change. Before this look, I had the “Behind the Wheel” and its mini description on the right hand side. I didn’t like the imbalance between that, the img of the car and the top menu so I moved it.

Im still working on my page. I decided to completely change my layout. With this one above I had an idea to have the menu on the left and when the mouse scrolls over, the line would pop out and go back when the mouse is not over it. I didnt like the way the photo blended into the background so I chose a new image and layout. This is what I am currently working with.