When it comes to user interface design, simplicity is very important. Any user interface design manual will underline that it is vital to keep things as simple as possible. Clearly, none of us wants to make a website deliberately complex. After all, we are interested in creating the user interface design that will allow our visitors to get what they want. Otherwise, they will just leave. But does making user interface design straightforward and functional mean making it simple?

As I was choosing a replacement for my broken phone I found myself looking at the latest smartphones. I do not listen to music on my phone, nor do I surf the Internet or play games. Yet I want to have a smart phone with a multitude of features that I will probably never use. This is typical of human nature: complexity adds to the perceived value, and while we might not use most features we would like to feel in control and know that we can use them if we want to. The same is true for the user interface design of any device or appliance.

I recently read an article about electronic products in South Korea. The author was impressed by the user interface design complexity of Korean devices compared to non-Korean. When he asked locals why Korean user interface design differed from European, they said that Koreans just like complexity. In Korea, complex user interface design means status. It is not so uncommon for a good Korean toaster to have an LCD display and a remote control. If you want to sell electronics in Korea, forget about simple user interface design.

It turns out that we actually enjoy having lots of different features on our devices. We don’t really want the simplest user interface design. We want the user interface design that is easy to understand and yet that makes us feel in control.

While the world wide web is often considered to be a symbol of a truly international form of communication, there are some boundaries that still exist. Even after the language barrier, there are cultural differences, which affect the very way we use the internet. This can be seen even in the user interface designs of websites.

When looking at the complexity of user interface design, it’s important to look at the functions users from different cultures expect from a website. Some international firms create entirely different user interface designs for their websites aimed at users from Europe and Asia. This is done to improve usability of the user interface design for local and international users. Components, such as color and graphics, play an important role in many cultures, which should be reflected in the user interface design. However the functional layout of user interface design can also vary across cultures. When we consider that Japanese script is often written vertically, this changes the way a Japanese audience reads text on the internet and navigates through a user interface design. While people from some cultures are more patient when it comes to searching though user interfaces, others appreciate efficiency. This is why usability is key and needs to be considered with the relevant audience in mind. When creating a user interface design, it is important to think about the hierarchy of information for a user. What information is most important to them and what do they want to access more quickly.

In order to create a universal user interface design, simplicity is usually the best option. Information should be clearly laid out and easy to access. If you want to see how your international users respond to your user interface design, you need to observe how they interact with your website and optimize the accessibility of your website across cultures.

This fall Amazon impressed its customers with the release of a new product, Kindle Fire. This new generation device stepped out of the line of simple e-readers into the severely competitive world of touch screen tablets.

What does Fire’s user interface design have to offer compared to previous Kindles? The reviews of this hot product are controversial. Kindle Fire is based on a customized version of Android. At first glance, its user interface design is simple and straightforward. It is equipped with a standard on-screen keyboard, which pops up when needed. Navigation buttons are completely eliminated from the body of the device, and that helps keep its size at seven inches with the screen resolution of 1024 by 600. Fire’s user interface design is divided into categories, for example, Books, Video, Apps. It is possible to customize the elements of the user interface design to bring the most used applications forward as favorites. The most recently opened applications are shown in a carousel view. The number of applications available for Kindle Fire is still limited but it might change depending on its popularity.

Amazon Cloud, the important feature of the Amazon Kindle series, is also part of Fire’s user interface design. Amazon Cloud not only provides Kindle users with 5Gb of free online storage, but it also allows them to buy and rent books and films directly from the Amazon store. While dependency on Amazon seems like a drawback, it is a useful feature for those who shop at Amazon anyway.

Customer reviews on Amazon generally confirm high usability of Fire’s user interface design. Some complain, however, that it is not as functional as that of iPad. Indeed, Kindle Fire is mainly intended for e-book reading, mp3 and video playing, and limited web-browsing. It is hard to compare this to the unlimited possibilities of iPad but their price levels are not comparable either.

While Kindle Fire is not designed to be iPad’s competitor, simply because it has a different purpose and functionality, this Christmas many buyers will be debating whether it is best to get iPad or Kindle Fire.

Inspired by a uxmovement blog post

The traditional user interface design convention of completing forms is by clicking a “Submit” button. The use of the word submit is a logical one because it describes what the system does when a user fills in a form. I find this type of terminology to have been more pertinent the further back in time one goes. In the past, particularly before the advent of graphical user interface designs, the average computer user tended to be engineers or technophiles. For such a person the vagueness of the word submit would not be that great. Today, however, computer users represent virtually all strata of mankind. The most successful computing products, websites, and applications today accordingly adopt a user-centered user interface design approach. iPhone, Amazon, Facebook, and Spotify (the music streaming tool) are all testament to this, with all of them great user interface design and usability.

The main problem with the wording of “submit” is that it is not user-centered enough. Sure users do submit their completed forms but they do so in the context of a specific task. Having the call-to-action affirm the current task in its user interface design lives up to Steve Krug’s first law of usability thus focusing on completing tasks. Examples of task specific labeling that can be applied to submit buttons include Create Account, Send Message, Subscribe Now, and Register Free. Furthermore implementing these types of buttons into a user interface design is an easy inexpensive process as all it takes is changing a little bit of text. iOS does something similar with the Enter button on the virtual keyboard. When typing in a password for a WiFi connection the word changes to Join and to Search when using a search bar.

One aspect of wireframing user interface designs that can easily be forgotten or underperformed is the creation of annotated wireframes. Annotated wireframes are, quite simply, wireframes of UI designs that feature notes and comments that clarify the user interface design. No matter how well made and clear wireframes of user interface designs might be, there is always a danger that biases or pre-concieved notions might affect a stakeholder’s judgment. One needs a thorough understanding of a wireframe in order to objectively understand a user interface design. This is even more true if the stakeholder viewing the wireframe is not well versed in the practices and principles of user experience and user interface design. Annotated wireframes are like the key to a map, while you can always look at a map without necessarily reading the key there are times when a key is necessary.

What is the best way to annotate wireframes of user interface designs?

Most wireframing tools today, be they online wireframe tools that can create clickable wireframes or a simple mock-up tool, have built-in functionality to add annotations to wireframes. However there are some things to consider when annotating wireframes of user interface designs as there comes a point when too many annotations can become counterproductive. It is crucial to keep annotations on wireframes concise. The more annotations put on wireframes the more noisy a user interface design becomes and this could become distracting. One of the ways of keeping annotations on wireframes concise is to always focus on the user benefits of the UI design elements. Clients who may not be well versed in user experience and user interface design practices will still appreciate knowing the benefits for users. If annotations are too numerous one could number them, ideally from left-to-right going down the user interface design to make understanding quicker and easier.

Everything about Algoriddim’s Djay iPad app screams out “this is what all the post-PC fuss is all about”! When discussing the merits of tablets with a developer friend of mine she basically concluded by saying that everything one could do on a tablet one could do even more conveniently and effectively on a laptop. The Djay iPad app, however, would be sure to make her reconsider. In terms of user interface design the iPad and desktop apps are similar. They both have that instantly recognizable skeuomorphic user interface design of an actual DJ mixing rig.

When done right skeuomorphic user interface designs are great at visually expressing what an app is and how it might work. The iPad version has a cleaner UI design with bigger icons to touch. It features two vinyl decks, each with accompanying waveform overviews at the top of the user interface design. The needle also has a practical purpose rather than simply serving as skeuomorphic UI design eye candy. The needle moves as a track progresses and you can use it to jump to desired parts just like a DJ would with vinyl.

Although the iPad may lack some of the features of the desktop app, I find that it has better usability simply because you can DJ doing a number of things at once. The desktop, without an external controller, can only support one mouse at a time. That is like a real DJ only being allowed to DJ with one finger! On the iPad you can mix, while you scratch etc. The ability to record sets is also a welcome addition and the feature list is bound to grow with each passing iteration. Don’t expect to find your favorite DJ using this at the Ministry of Sound but considering the iDJ MIDI controller already available such a thing could be commonplace in a couple of years.

In the first part of this blog post on the frontiers of natural user interface design I touched on the use of touch and audio. In the rest of this blog post I shall briefly look at further frontiers of natural user interface design.

Using Visual & Location Information to Control a User Interface Design

Imagine you are somewhere sightseeing and you come across a really interesting landmark. However for some reason you do not know the name of the place. In such a case a picture could literally be worth a thousand clicks. Bing Vision and Google Goggles allow users to search via a picture instead of typing text. Augmented reality apps are also another great example of using visual information in natural user interfaces. The contextual information that is served up is also further enhanced by location information. A great example of using location information to improve usability is the Berlin public transportation smartphone app. Rather than always having to know the name of the street you might happen to be in at that particular time, the app gives users the option to select current location with a single click. The upcoming Reminders iOS app allows users to set reminders to go off when leaving or arriving at a particular location in addition to the standard chronological alerts.

Gaming and Natural User Interface Design

Naturally these frontiers of natural user interface design work best in a synergistic combination thereof. The gaming industry has also been at the vanguard of natural user interface design much like how Formula One is the vanguard of automotive technology. The Wii certainly proved popular with its motion sensing control pad. It ended up outselling the much more powerful Playstation 3 and Xbox 360 leading both to introduce natural user interface controllers of their own. The Xbox’s Kinect controller is arguably the most multifaceted of the lot as it turns the users entire body into the controller. As users gesture around and shout commands. In a way the Kinect best exemplifies the possibilities that natural user interface design presents. Perhaps the changes from Command Line Interfaces to Natural User Interfaces represent a shift from us having to be aware of the nature of computers to our computers being more aware of us.

Welcome to the second part of my two part blog post on using Niehaus wireframes in UI design.

As we saw in the first part of this blog post Niehaus wireframes are wireframes that are built with a conversion strategy in them. They thus point out which parts of the user interface design are more relevant in terms of return on investment.  The creation of Niehaus wireframes entails three wireframing stages: namely the Pareto wireframe, Niehaus wireframe, and Storyboard wireframe stages.

Stage 1: Create a Pareto Wireframe

The Pareto principle (also known as the 80/ 20 rule) is key to the Niehaus wireframe process. In this instance the wisdom goes as follows: 80% of all the potential conversion of a user interface design can be achieved simply implementing 20% of the possible UI design solutions. In order to help determine which solutions fall into this 20% target audience profiles are created. These profiles help determine which segment of the target audience is more likely to actually convert into a paying customer. Armed with these profiles a Pareto wireframe is created. This is a type of wireframe where a user interface design is divided into segments and given value creation scores for the different profiles. In the end relevance and focus is given to 20% of the user interface design elements that are most likely to bring in 80% of the market.

Stage 2: Creating a Niehaus Wireframe

This stage distinguishes the Niehaus wireframe technique. The importance of user interface design elements is distinguished by gray scale color coding with the darkest color reserved for the most important UI design elements. Niehaus wireframes typically have four levels of gray scale starting with light gray. Light gray elements tend to comprise around 60% of a user interface design and include things like the logo/ site ID and main navigation. Tertiary focus is given to elements with a mid-gray color which make up around 30%. Secondary focus is given to dark gray elements. These tend to make up 8% of elements on a user interface design and should provide a justifiable conversion contribution such as leading to the primary focus. Black would be used to denote the primary focus such as a Call-to-Action. Black elements would typically comprise 2% of the Niehaus wireframe. It is important to remember that these percentages depend on the target audience, context of a web page, page type etc.

Stage 3: Create a Storyboard Wireframes

The storyboard wireframe is more like a classic high fidelity wireframe. The main difference with storyboard wireframes is that they feature actual detailed content of a website whereas classic wireframes often make do with placeholders. The real content here is used to accurately measure whether all elements of a user interface design work in unison to deliver the conversion desired.

What makes Niehaus wireframes particularly appealing is that they give attention to relevant user interface design elements and make it clear for all what they may be. Due to the nature of the wireframing process user interface designers get to incorporate a conversion strategy in their wireframes.

Welcome to the first part of my two part blog post on using Niehaus wireframes in UI design.

Wireframes have long been a useful tool in the creation of user interface designs for software applications and, later on, websites. In the beginning wireframes of user interface designs were created by hand with paper and pen in a technique known as paper prototyping. One of the ways of looking at wireframes is as blueprint plans that user interface designers use to achieve their goals. In other words they are visual guides that show the navigation, layout and other elements that comprise a user interface design. But just like blueprint plans, wireframes haven’t changed much. The area where wireframes have changed, though, has been in the way they are created and presented. Considering that paper prototyping started in the mid 80s then these innovations are perhaps not as surprising because computers have changed so much since then.

Paper prototyping still is the simplest and quickest way of creating wireframes of user interface designs and therefore very accessible. Today, however, user interface designers have the option of using wireframing software to create wireframes enabling them to modify and elaborate them as UI design progresses. The various wireframe software out there provide a number of advantages over the more traditional paper prototyping. For starters wireframes that are created digitally can be saved and iteratively developed. This also opened the door for UI design teams to be able to collaborate on creating wireframes. Some wireframe tools have even enabled true GUI prototyping. This is when the wireframes are not just static images but they can also simulate use cases and thus behave like a website or application. With the ubiquity of broadband internet connections some online wireframe tools would even work through the magic of the cloud requiring nothing but a modern web browser.

In order to create wireframes  that go beyond simply depicting the make up of a user interface design, Sandra Niehaus presented  a new wireframing concept at the Conversion Conference. As the name of the conference suggests a key concern of Niehaus wireframes is how to convert potential customers into paying customers through meaningful user interface design. Classic wireframes have three fundamental weaknesses, according to her. These are relevance, focus and conversion strategy. Wireframes created using her technique go further than  just displaying  the structure. These types of wireframes are now referred to as Niehaus wireframes in her honor. Join me for the second part of this blog where I shall go into how to create Niehaus wireframes.

Despite shutting down Google Labs the spirit of innovation is still alive and well at Google in the shape of Gmail Labs. In the line of user interface design tweaks such as the Important First and Priority Inbox views comes a new way to view your Gmails. The aforementioned views, however, were never dramatic changes to the Gmail user interface design but simply sat well with the original List View. The list view user interface design is after all the classic way webmail has been displayed. However user interface designs that provide a preview pane for a meaningful glance into emails have been adopted by most of the popular webmail services albeit in their own particular way. Of course the use of a preview pane user interface design for email is nothing new and is the way desktop email clients work.

Well Google has now finally joined the preview pane user interface design party. Well to be honest Gmail for tablets already has preview panes incorporated into its user interface design and one does suspect that it was the tablet version that inspired Google to port this feature over. One blogger even mentioned how he used to run his iOS simulator to check his email on the iPad version of Gmail due to its superior user interface design. Once the preview pane is enabled users can toggle between no pane at all, a horizontal split or a vertical split by clicking on a button on the top-right of the screen. I found this to be refreshing where  preview panes on other webmail services tend to either have  a horizontal or vertical pane. The adoption of the preview pane into Gmail’s user interface design is bound to keep Gmail users from switching.