A User Interface Software Tool or Interface Design Tool Helps Developers Design and Implement the User Interface.

This is the second part of my two-part blog post on psychological manipulation through the user interface design of e-commerce sites. In this part I shall discuss other user interface design elements that encourage purchasing.

What other user interface design elements encourage purchasing?

Another way that e-commerce sites encourage purchasing through user interface design elements is through time. Adding the urgency of a clock running down to the user interface design encourages decision making in a “I better take this opportunity before it goes away forever” way. Ebay and Groupon are two great examples of e-commerce websites that incorporate this into their user interface design/ user experience. Groupon even introduces the characteristics of peer pressure into the whole mix. Their user interface design showcases the number of other users who have signed on. However it is also the time limit placed on the product that accelerates a users decision making. The user interface design also shows how much a user would save by signing on to the deal. The psychological call-to-actions don’t just stop there as there is also a convenient ‘Buy it for a friend’ conveniently placed to drive users towards purchasing even if a particular deal might not be for them. All these user interface design elements combine into a hard to resist cocktail that encourages purchasing in one way or another.

How do some e-commerce sites counter the negative feedback of impulse buys?

Psychologist working for retail companies have long been aware of the guilt that burdens shoppers who have undergone impulse buys. This guilt needs to be minimized as it can engender thoughts of returning the product as a defense mechanism. One of the ways e-commerce sites, Apple in particular, counter this negative feedback is to delay the negative feedback loop. With their App Store, Apple decided to not send receipts the moment of purchase. This tactic is simply so as not to instantly remind the user of their purchase as seeing the consequences would be negative feedback. In the case of the App Store this is absolutely understandable. Most apps don’t have a trial version of the full version. This means that for many users forking over cash is the only way to really get their hands on an app. Naturally if it turns out that the app was not all it was cracked out to be then negative feelings out of the impulse buy might brew. Next time you’re about to go on a shopping spree online ask yourself who’s pulling the strings?

This is the first part of my two-part blog post on psychological manipulation through the user interface design of e-commerce sites.

Psychological manipulation through design has long been a reality of the retail industry. Companies have long lavished high wages on psychologists and other professionals to figure out the best ways to get us to spend more of our money. Even if you don’t realize it a simple stroll through a supermarket will probably end up with you putting more in your shopping cart than was on your shopping list. In the same vein e-commerce sites also put just as much effort into their user interface design, so as to achieve a similar effect. In effect what they are trying to achieve through their user interface design is the justification of spending habits and getting users to feel better about their transactions.

What power does the default user interface design hold?

The default user interface design/ user experience is the UI design/ UX of a website or application that you see without you having had the chance to customize it. You can think of it as the clothes that might come with a doll from the box. According to usability guru Jakob Nielsen a large number of users will always stick to the default user interface design and settings. This “power of defaults” means that many of the customization features are untouched despite the fact that these settings could, and often do, improve the overall user experience/ user interface design. Conversely speaking the default user interface design and functionality has to be spot on. For a long time Amazon’s user interface design has been a UI design success story, constantly refined and perfected leading to increased sales. An example of the power of defaults effect on UI design that Nielsen gives is in filling in the country field of registration forms for one of his usability conferences. Instead of leaving the country field empty the location where a user is registering from can be used to, say, show the United States for someone registering from New York. The goal here is to obliterate the small frictions that get in the way of repeat purchases. One way sites like Amazon do this is to incentivize users to spend more to qualify for the omission of mental hurdle that is shipping costs!

“Mirror mirror on the wall which is the coolest user interface design of them all?” If the mirror I am referring to was paired with some speakers it could very well reply “verily the coolest user interface design in the land is mine”! What was once a magical concept from children’s stories could very well be coming to a bathroom near you. Thanks to the New York Times’ Research & Development group mirrors are the latest screen to join the user interface design bonanza. Technophobes might be quick to remark that in an ever more connected and faster moving world not even the venerable bathroom is safe. Now the time spent in the bathroom can be spent multitasking by, for example, brushing your teeth while reading emails etc. The mirror uses the Microsoft Kinect peripheral to detect the user and receive voice instructions.

The mirror also packs an RFID reader to recognize tagged pharmaceutical products and more for information. Naturally the prototype has been shown browsing through New York Times articles and video content. The user interface design of the mirror is reminiscent of augmented reality apps only that the information is overlaid on the mirror’s reflection rather than through a camera. One of the videos showcasing the product featured a user flipping through ties from his wardrobe. The only drawback I saw with this is whether people spend long enough in front of mirrors to justify reading an article, for example. However as part of an ecosystem it could prove invaluable. One could start surfing while brushing one’s teeth, to then pick up where one left off on a screen on one’s fridge, car, smartphone, office computer etc… Now that mirrors are resembling magical myths of ages gone by the question remains which is the next screen to join the user interface design bandwagon.

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.

This is the first part of my two-part blog post on the frontiers of natural user interface design.

Natural User Interfaces represent the third and latest paradigm in user interface design. The first user interface design was the use of Command Line Interfaces exemplified by operating systems such as MS-DOS. These eventually gave way to Graphical User Interfaces introduced by the first Macintosh and, later, by Windows. The user interface design of GUIs use visual metaphors to convey meaning such as a trash can icon to signify the recycle bin folder. Natural User Interfaces expand on GUIs by seeking to become invisible with successive learned interactions that are intended to feel as natural as possible. Natural User Interface design takes place on a number of frontiers.

Using Touch/ Gestures to Control a User Interface Design

Using gestures on a touchscreen is perhaps the most advanced form of natural user interfaces. Smartphones and tablets have made brisk business with their intuitive user interface designs that are so natural there are countless videos on YouTube of toddlers learning to use them before they even learn to speak properly! This would be impossible with Command Line Interfaces. The iPhone is undoubtedly the poster boy for using touch to control a user interface design. Swiping and pinch-to-zoom  have become so commonplace that Apple has even patented some of these interactions to secure a monopoly. Multi-touch gestures are also now jumping to the desktop as the latest Mac OS X implements iOS gestures

Using Audio to Control a User Interface Design

The idea of audio as a frontier of Natural User Interface design is not new. For accessibility reasons voice control has been implemented in several user interfaces. The Dragon speech recognition software package is built on this very premise. However audio also brings a number of challenges with it. Audio is still better processed by the human brain than by computers, though at the rate technology is growing we might not be too far off from the day when one could simply talk to a computer like one would to another person.

Google appears to be slowly ushering in new user interface designs to their web app tools.  Among the most talked about in the blogosphere is the experimental YouTube user interface design dubbed Cosmic Panda. That YouTube is the world’s most popular video site is beyond question but this success has rarely been attributed to the YouTube user interface design. Well at least recently! YouTube’s user interface design has been looking more and more outdated in an era of minimalistic and polished user interface design. Although there have been numerous changes to its user interface design one gets the feeling that the UI design team decided to make sure YouTube is instantly familiar to users who haven’t used the site much since its inception 8 years ago. If the Cosmic Panda user interface design is finally released then this would certainly mark the biggest UI design changes YouTube has yet seen.

The new look and feel of the user interface design  features darker UI design themes and lightbox type elements that make the videos more prominent. Related videos now appear at the bottom like a filmstrip rather than on the right sidebar. The user interface design of Channel pages has also been revamped with larger pictures of videos. This naturally means that less videos are visible at a go but the trade off in user experience is a worthwhile one. An option that I would have liked would have been the ability to watch directly from this list view like one would on Facebook. Most promising of all, however, is the ability to browse and search while watching a video but this feature is currently only available to Chrome users. It must be said that the new user interface design is similar to that of Hulu which is a good thing. Hulu has a characteristically uncluttered and polished user interface design that coupled with YouTube’s market share, higher selection of videos and brand awareness will please users.

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.