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

Good user interface design ensures that visitors to your website do not leave it shortly after coming. How user friendly a website is usually determines its success. It is hard to imagine that a website with clumsy and complicated user interface design keeps its visitors for long. This is why usability should be the number one consideration during the entire development process, beginning with user interface prototyping. In this blog post I would like to point out the three most common usability flaws to consider during user interface prototyping.

Unclear or complex navigation is your first enemy. When a user comes to your website he has a particular purpose: find your phone number or buy a pair of sneakers. User interface prototyping is the right stage to consider how clear your navigation is. Are you using obvious labels? Is information broken into logical categories? These days many designers are obsessed with innovative navigation design concepts. It is advisable to get those tested during the user interface prototyping stage to avoid rework in the future.

Something that truly annoys me in many websites are horizontal scroll bars. You don’t have to be a usability expert or do any user interface prototyping to know it is a bad idea. Nevertheless, user interface prototyping would show you that mine is not an unusual opinion. Most importantly, many users do not bother to scroll so the information never reaches them. User interface prototyping can help you plan the amount of content that will be available on the website. Remember that in many cases less is better than more.

Lastly, I have to mention small or invisible click areas. If a user can’t instantly get where he wants to go he will probably not keep trying for very long. It is a rule in user interface design to make click areas prominent. They should be noticeable and they should be of an appropriate size for a user to click on them with his mouse on the first try. User interface prototyping and subsequent prototype testing can help you determine the right size of your user interface elements. Something else you might consider is that many users now browse the web on their mobile devices. Would the size of your links and buttons be appropriate for their screens?

Use common sense and bear these thoughts in mind during user interface prototyping.

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.

Wireframe software has gone a long way towards becoming the applications that web-developers and web-designers are using today. I recently encountered an article written by Julie Stanford in the beginning of 2003 on Boxes and Arrows on the benefits of using HTML for wireframing, and I wondered how the evolution of wireframe software happened.

Naturally, the first known wireframe tool was pen and paper. This one existed since the beginning of web-development. By the way, the first website to ever be published is said to have been developed at a CERN facility in Switzerland in 1991. Pen and paper were surely used then, and it still is a handy wireframing tool because it is quick and available to anyone. Have some ideas and no computer at hand? Just pick up a pen and jot them down. But paper prototyping, of course, also has its limitations as a wireframing tool that are partly solved by more modern wireframe software.

The beginning of 2000 knew two main types of wireframe software, which Julie Stanford describes in her article. Those were HTML-based and graphical tools. HTML wireframe software allowed web-developers to put together a few lines of code, and get a very simplified version of the website, which, nevertheless, would allow users to see its functionality because it produced web-pages with working links between them. Apart from links, these pages would not have very much in common with the future website.

Graphical wireframe software would have a closer visual resemblance with the future website’s layout, but those wireframing tools had no capacity to show how the website would interact with the user. Interactive elements like, for instance, a drop-down menu, could only be represented by a still image. In many cases, Photoshop or similar image-processing applications were used.

Today, thankfully, there is a lot more diversity than this. One of the first specialized wireframe software applications was released in 2003 and a variety of other tools followed, becoming more and more progressive every year. The latest wireframe software, first desktop and later web-based, is meant specifically for creating website wireframes with the least effort and time involved and allows web-developers not only to design great user interfaces but also to test those user interface prototypes through usability tests.

Last week Google posted in its official blog that a new user interface design was available for Gmail. It is still in a test mode, but the users that like it can switch to it immediately. The new user interface design can be accessed by clicking on the button in the bottom-right corner called “Switch to the new look”.

One of the important innovations of the new user interface design is advanced email search options. The drop down menu for these options is now located in the same window as the search itself. There, a user can refine his search by contact, folder, date etc. without having to go to a different window. This possibility seems to be a major improvement for the users that have a large number of emails and use the web interface for email.

Another improvement of the new user interface design is a neater conversation view. Google added a social element to the email threads: users can now see profile photos of the person they are corresponding with. This new look creates an atmosphere of instant messaging, where users can see clearly which person is writing what.

Furthermore, the new user interface design has more flexibility. Users can customize the side bar with labels and the chat area. All boxes can be resized by using arrow buttons and the chat window can be removed altogether by clicking the button in the lower left if the user does not need it.

Apart from that, Google introduced elastic density and a variety of new HD themes to the new user interface design. These features make Gmail more colorful and adjust spacing between elements automatically depending on the user device’s properties.

There is no self-respecting PC manufacturer out there today that doesn’t boast at least one tablet among its inventory, or in the very least hasn’t announced plans to release one. Lenovo has just released the Android-running ThinkPad Tablet to complement it’s ThinkPad range of business-centric laptops. The product design of the tablet maintains the same look of the laptops although it isn’t as thin and light as, say, the Samsung Galaxy Tab 10.1 and the iPad 2. Uniquely the tab comes with a stylus pen ready to jot down notes, make annotations, or simply to sketch out ideas. In terms of user interface design the ThinkPad Tablet adds a couple UI design flourishes of its own onto that of Android Honeycomb. The most obvious is the user interface design of the homescreen, which features a Launcher widget in the middle with shortcuts to ‘Watch’, ‘Email’, ‘Listen’, ‘Read’, and a globe at the core which links to the web browser. This gives users, new ones particularly, quick access to arguably the most used functions on a tablet apart from video games.

What are some other user interface design flourishes of the Thinkpad Tablet?

Another user interface design novelty with regards to Android is the App Wheel. This can be activated by clicking on the icon at the center of the bar at the bottom of the homescreen’s user interface design. Doing this brings about a carousel-like wheel of a user’s favorite apps to the right of the user interface design. Other than that the user interface design is largely unchanged from Honeycomb, unlike the completely new user interface designs of the Amazon Kindle Fire or the GridOS. Arguably the most appealing part of the Thinkpad Tablet is that it comes pre-loaded with all manner of apps that makes this tablet a better all-rounder out-of-the-box than even the iPad. However there are a number of usability issues, such as poor AVI video playback, which hold it back from being an all out hit. Business users will be more than satisfied with the built-in apps, stylus and the extra ports.

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.

Although Microsoft is synonymous with software it is also a hardware company and an innovative one at that, as the natural user interface design of the Kinect proves. One piece of hardware they themselves do not make are phones, having long killed the Kin phones before release. Furthermore, despite being roundly praised for its usability and user interface design, smartphones featuring Windows Phone 7 have produced lackluster sales. A deal with ailing giant Nokia represents Microsoft’s best chance yet of getting as many users as possible to be in a position to fall in love with Windows Phone 7’s user interface design. As of writing a Nokia smartphone running Windows Phone 7 is still forthcoming, yet a patent shows Microsoft has its eyes on creating their own unique smartphone.

What could be the implications of this patent on user interface design?

The basic premise of the patent is a modular device with a slide out section that can be filled with several modules depending on a user’s use case. In total the patent showcases four modules: a QWERTY keyboard, a game control pad, a secondary screen, and a battery module. Today smartphones are differentiated across these four niches, so to speak. Some phones feature a QWERTY keyboard, the Playstation phone features a game pad, battery cases are used to increase the tie you can use a smartphone, and a few phones have also tried to implement a dual screen etc.  In terms of user interface design the second screen holds the most promise. Nintendo’s DS handheld console has shown the great practicality of dual screens, with the second screen’s user interface design used to display vital information leaving the main screen’s user interface design uncluttered. The tiled user interface design of Windows Phone 7 could be made just as practical as users view, say, a YouTube video on the main screen while writing a text on the second.

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.