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.

What is extreme programming?

Extreme programming is a way of quickly iterating applications while still taking user feedback into account. It is a type of agile software development and as such is based on shorter development cycles that incorporates UX/ UI design feedback into new iterations that are released more frequently. In effect what extreme programming does is to combine and speed up the best UX/ UI design methods, hence the use of the word extreme.  Extreme programming is a synergistic collaborative process that brings together user interface designers in a win-win situation.

The four basic phases of extreme programming in UX/ UI design

There are four basic phases in the extreme programming process which a UX/ UI design team can implement whichever way suits them best. Coding is considered the cornerstone of extreme programming because after all the wireframing and prototyping a user interface design needs to be coded or there is no product. Testing is another phase where the kinks are ironed out of the user interface design to ensure quality. Listening to customer’s needs and designing are the other two phases.  These phases must be done with the following five values in mind: simplicity, communication, respect, courage, and feedback.

More on the values of extreme programming in user interface design

Communication here refers to the UI design team more than the users. When rapidly creating iterations it is important to provide adequate documentation to the user interface design team to engender a shared view of what requirements the system needs to fulfill. Simplicity is ensured by encouraging user interface designers to provide simple solutions first before worrying about adequate functionality. The feedback loops created during the UI design process are great ways of making the shorter development cycles work. Keep in mind that feedback here comes from customers, the UI design team, and the system itself. Rounding off these values are the courage it takes to quickly iterate for today and not tomorrow as well as respect for users, the team and the system.

What is parallel design and how does it relate to user interface design?

Parallel design is a useful method when undertaking a user interface design project, or any other creative process for that matter. The basic concept is to accumulate as many ideas as possible and then to take the best ones and synthesize them into better concepts of user interface designs. In many ways evolution is synonymous with the process as a natural selection of ideas occurs with the best ideas cannibalizing on others to emerge as the apex predators of the ideas ecosystem. Parallel design in effect thrives on the input of user interface designers as it requires a stream of ideas. The freedom and impetus to be as creative as possible can be a very liberating way of creating user interface designs.

How to create UI designs through the parallel design process

To further accentuate the generation of ideas a team of user interface designers is further split up into subgroups that brainstorm independently. Wireframing tools are great in this regard as they allow user interface designers to quickly sketch UI designs. Online wireframe tools that create clickable wireframes even further add to the convenience of creating wireframes. The user interface design groups are encouraged not to discuss their UI designs or show any wireframes  thereof until a workshop is held. At this point the UI design teams showcase their wireframes and use the best ideas to create a better user interface design. This process is repeated in cycles (it is recommended to go through at least four of these cycles) until the general user interface design is achieved. As the English say ‘the proof of the pudding is in the eating’ and the pudding of parallel design is repetition and collaboration. In the 2nd part of this blog I shall look at the benefits and drawbacks of parallel design when creating user interface designs.

Benefits of waterfall design in user interface design

Because the waterfall design process happens sequentially it is a great method for user interface designers that are linear thinkers. More broadly speaking the waterfall design process helps UI designers in making sure that all components of a user interface design are  exhaustively conceived and analyzed. This way errors in a user interface design are also easier to spot as the waterfall design process moves along.

Problems with waterfall design in UI design

The saying goes that one’s biggest strength can also be one’s biggest weakness. The same can be said when using the waterfall design process to create user interface designs. The one way traffic inherent to the method can be a constraining way of creating user interface designs. The lack of flexibility can prove to be counter-intuitive for some user interface designers. Paying too much attention to the various steps can lead a UI designer to loose sight of the bigger picture. This can result in having to spend more time to go through the steps again in order to change things and solve other UI design and usability issues.

Waterfall design method lesson: know your team, know your method

The decision to use the waterfall method when developing a user interface design boils down to the makeup of your UI design team. For UI design teams that prefer to work in a more free-form way naturally the waterfall design process might be more problematic than for a UI design team that prefers to compartmentalize their workflow and work linearly. Knowing the psychological makeup of your team goes a long way in helping one determine the best user interface design methodology to use.

What is waterfall design and how does it relate to user interface design?

Waterfall Design is a methodology used by user interface designers during software development or more precisely during user interface design. The name waterfall design comes from the imagery of water flowing from the top into a waterfall until reaching the rest of the river down below. Just as the direction of dear old H20 in a waterfall can only be one way, waterfall design is a process that happens sequentially. So when creating a UI design using the waterfall design methodology one has to first complete a phase in order to go on to the next. In the rest of this blog I shall briefly overview the process with the 2nd part of the blog showing some of the ways user interface designers can implement it in their projects.

How does the waterfall design process work in UI design?

The waterfall design process dates all the way back to 1970 to a director from the Lockheed Software Technology Center named Winston W. Royce. Back then he did not coin the term waterfall design but, nevertheless, he published an article detailing the various phases that user interface designers would use in the waterfall design process. The seven phases are as follows:

1.    Requirements specification: In order to know what is required of a user interface design it is necessary to create a set of use cases detailing the interactions users will have with it.

2.    Design: At this stage UI designs create the overarching supra-structure of the user interface design to house and facilitate the use cases of the future software or website.

3.    Construction: After deciding on the look and information architecture of the UI design the actual coding begins.

4.    Integration: Here user interface designers ensure that the different parts of the user interface design are consistent and functional throughout.

5.    Testing/ debugging: A user interface design may look good but more importantly it has to be usable. Conducting usability tests helps ensure this.

6.    Installation: At this stage the final version of the UI design is implemented.

7.    Maintenance: Just as with anything man-made maintenance is key, this applies not just to the user interface design but also in terms of customer support.

Each of the successive steps is meant to build upon the last one to contribute to the overall goal. Waterfall design is rigid in a sense in that it’s either the waterfall design way or the proverbial highway. In the 2nd part of the blog I shall go into the benefits and drawbacks of waterfall design when it comes to user interface design.

Welcome to my two-part blog on Ethnography and the role it plays in usability engineering and user interface design.

What is Ethnography?

Ethnography is an approach to research that involves in-depth study of population groups through participant observation, interviews, questionnaires, and artifact analysis in an attempt to gain a thorough understanding from a number of perspectives. This research methodology is usually associated with the social sciences, in particular anthropology and sociology. Ethnography also takes place in the natural context of the subject being observed and, as such, the term is often interchangeable with phrases such as “field study” and “case report”. Traditional ethnography focuses on long-term studies spanning weeks, months, or even years. This is in order to understand, first-hand, fundamental answers in regard to the subject(s). Where do they live? How do they make a living? What do they eat? What are their linguistic, housing and marriage customs etc?

What does ethnography mean in the context of user interface design?

In the context of user interface design, ethnography is a valuable source of data for personas, scenarios of use, task analysis, requirements elicitation, and storyboards. Sometimes in life the laboratory setting can obfuscate data due to the very act of observation affecting the subject. Ethnography seeks to paint observations in their proper naturally occurring context, i.e. the point at which they would be using a software application and navigating its interface design in the course of their everyday life.

Ethnography as a usability method

Ethnography lends itself well to usability testing of user interface designs due to the principle of holistic human data collection. This works well in tandem with the fundamentals of user experience in user interface design. Ethnography brings with it a number of merits to usability testing. In comparison to observations conducted in the lab the authenticity of ethnographic reports is higher. Behavior observations are best understood within their natural environment and ethnography allows for this. As a usability method ethnography provides a much more comprehensive perspective of the users and their environment than other forms of research. Another advantage is that it employs a theoretical framework for contextualizing data.

When to use ethnography as a usability technique

According to usability expert James Horn, the use of ethnography as a usability method is “best used in the early stages of development, when you need to know more about the issues surrounding the use of a product rather than actual metrics.” In the very early stages of user interface design, using the ethnographic method will help you collect user requirements based on how users operate within their “native” environments, which is how they operate in the real world.  Obtaining these user requirements will then allow you to incorporate your findings into preliminary designs of a user interface. Of course, it is important to watch out for observer bias, as Information and results are highly dependent on the researcher’s observations and interpretations.