Principles of UI Design

Structure – Xbox Dashboard

https://i2.wp.com/www.blogcdn.com/www.engadget.com/media/2011/12/xboxdashrev2011ii.jpg

The Xbox 360 Home dashboard is a simple, effective and clear user interface. It starts off on the home page which gives you the option to immediately play the game inserted into the Xbox. On the main page there are also promotions and new Xbox 360 game updates and ad-on’s which is useful for most gamers. The search bar at the top is straight forward and gives you a new interface for each topic allowing you to do other things on the Xbox like watch movies or download music. You can also change the theme of your dashboard for something that suits you better, mine for example is a horror theme so on every interface, there are zombies.

Simplicity – Listverse

https://i2.wp.com/ceblog.s3.amazonaws.com/wp-content/uploads/2011/11/Listverse-1024x496.png

Listverse has a layout that makes browsing fun and easy. Everyday a new list is added and it is the first list at the top of the website. Every list after goes in order by date. Each list has a different colour category to make it easier to figure out what the list includes. The navigation also has all the lists categorized making it a great way to find lists on topic of interest. Above the first list, you can browse the lists by picture and title or you can scroll down and read a small intro of each list to get a better understanding of the lists.

Visibility – Screemers

https://i1.wp.com/www.screemers.ca/intro.jpg

Screemers isn’t a website you would see everyday, but when you do need to visit the website, they make it a rather easy thing to do. Since there are only two locations, they ask which location you’re planning on visiting. They keep the scary theme by sticking to dark colours and red. After deciding which location to choose they guide to timetable of hours of operation and dates which is probably the reason you are on the website.

Feedback – League of Legends

https://i2.wp.com/i825.photobucket.com/albums/zz177/KuroRoy/Screen03.png

League of legends is a free video game that involves two teams of five or three to battle on maps in order to destroy the enemies nexus. There are over 100 champions to choose from and each champion requires skill to master. In order to master the champions though you must understand their 4 skills. The skills are used by pressing the Q, W, E, and R buttons. By clicking these buttons, a blue highlighted area will show you how far your skill can travel or the size of the skills ability. You can read the skills by hovering over them which also shows the skills radius and explains the skills details. In order to be good at the game, you need to pay attention to your skills,  including how much mana or energy they cost to use and the cool downs, all of which is displayed upon activating the skills. The game’s interface is so easy and exciting to get used to, making league of legends one of the most played video games in the world.

Reuse – FL Studio

https://i2.wp.com/static3.fjcdn.com/comments/fl+studio+anyone+_70e787b95a469fd063300f6f7944298d.jpg

To somebody who like’s to play with sound, FL Studio is a program that allows you to create your own music by mixing and grouping sounds together. The options are endless. With updates every year or so, the options almost feel unlimited. You can make a song one one way and the next time you use FL Studio you can make a new song in a complete different manner. The colours are quite dull which is actually a good thing if you’ll be staring at this interface for long amounts of time. It has no strain on your eyes but still colour codes specific things making it easier to remember what those buttons do.

Tolerance – InDesign

https://i0.wp.com/www.adobe.com/designcenter-archive/indesign/articles/lrvid4025_id/Irvid4025_id_2.jpg

InDesign is a perfect example of a user interface that displays tolerance. InDesign literally stops you from printing something that has errors. The window is called preflight and it makes sure you have no spelling errors or overflow text. It also makes sure that all your links are working so that when you go to print, the pictures show up in the right resolution. Errors like this are critical for designers as it can cost them very high amounts of money to fix. The preflight walks you through where the errors are by describing the page they are on, or you could click them to see the error immediately.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s