Category — Interface Design

There are many different categories of user interface design tools. Just as there are many different types of user interface design, so too are there many different user interface design tools. While there are tools for designing many types of interfaces, I want to focus on tools for designing graphical user interfaces for software applications like websites, mobile apps or enterprise tools, in short: GUI design tools. In general, a GUI design tool uses software visualization methods to draft the visual design and/or interactive functionality of an application. These tools can be high-fidelity or low-fidelity user interface design tools, desktop or web-based user interface design tools, and can be stand-alone or integrated with other applications. Some types of user interface design tools are able to prototype the interactive functions of software concepts.

High-fidelity user interface design tools are often used to produce prototypes that are very detailed and close to the look and feel of the final product. In contrast, low-fidelity user interface design tools offer a quick way to visualize software in basic images, usually without much visual design, in some cases allowing the user to ad interactivity to the low-fidelity UI prototypes to use them in usability testing.

Desktop-based user interface design tools are applications that can only be run once software has been installed on a computer. They are platform-dependent, and some can only be used on a limited range of operating systems. They are useful if you wish to work offline and on your own. Web-based user interface design tools allow users to work online, usually without installing any software. This often makes teamwork much easier if the user interface design tool includes collaboration functions, for example allowing multiple users to edit and/or comment on interface design prototypes.

Stand alone user interface design tools are often simpler to use and get started with than integrated user interface design tools. Stand alone tools can also be a more cost-efficient option since integrated tools are usually more expensive and often come with components or functions that may not be needed, especially if you wish to focus on one element of the development process. Integrated user interface design tools usually combine features from different stages of the development process, which may include a requirements elicitation, testing and quality-analysis phase or project management functions.

There are a number of user interface design tools on the market that may be an appropriate option, depending on what elements you wish to focus on and what stage you are at in the prototyping process. The most important thing to remember is that these user interface designs should match your respective requirements and the purpose of your prototyping or design efforts.

The process of interface prototyping, particularly user interface prototyping is important, especially in building complex websites. Using an interface prototype allows you to analyze the functionality and usability of your website before the lengthy and costly programming stage. The most important aspect of user interface prototyping is the ability to analyze usability and collaborate according to the needs of the person or organization running the website. There are four key stages to user interface prototyping, which will be explored in this blog.

Stage One – Assess requirements

In this stage, the website implementer establishes the requirements for a website interface prototype. User interface prototyping begins with the client’s needs and it is vital that collaboration is prominent throughout the interface prototyping process. Here it’s useful to look at the requirements a client might stipulate in the initial design stage, such as input fields, links to other pages and the use of visual media. Once these requirements have been established, the design process begins.

Stage Two – Prototype interfaces

In the design process, the user interface prototype is developed. The designer sticks to the brief that has been made by the website implementer and builds the initial prototype. This initial user interface prototype is then sent back to the client.

Stage Three – Test prototypes

Once the client has looked at the initial user interface prototype, it is likely that suggestions for changes will come about. At this stage it is useful if the prototype software enables real-time collaboration, so that the client and designer can communicate changes to one another quickly and effectively. Here the end user can also play an important role, especially if the prototype design software enables remote usability testing. This type of software enables you to see what problems end users may encounter and resolve them quickly and easily.

Stage Four – Adapt interface prototypes

The final stage involves components of the previous three process stages. The prototype is reviewed and revised until the client is satisfied that all the requirements have been met and there has been positive usability feedback from end users.

What are the benefits of interface prototyping?

There are many benefits to using interface prototyping. Not only does this allow for collaboration between the designer and implementer of the website, there is also the possibility to test the interface prototype on end users. That means not only is there the possibility to change design proposals early on, but end user problems can also be anticipated and resolved quickly. The main advantage of user interface prototyping is the speed in which the prototyping process happens, which in turn can save your company money.

User interface prototyping is an indispensable stage of UI design. The advantages of interface prototyping are numerous, ranging from boosting creativity to fostering communication within the development team. However, every web developer has to be aware of the dangers that interface prototyping has and that can easily be avoided with a bit of caution.

Sometimes clients do not know what prototypes or wireframes are meant to be. They see wireframes and get disappointed by the lack of visual elements. This creates one of the most widespread traps for web developers. In order to impress the client, they embellish wireframes with graphical elements, which are distracting and frequently unneeded. A web developer must remember that user interface prototyping is the initial stage, which helps develop the concept and test its usability, therefore interface prototyping is first performed in low fidelity. Graphical design details are dangerous at this stage because clients tend to focus on them rather than the entire concept, which gets you stuck in this phase longer than intended. Carefully educating the client about the importance and intention of interface prototypes will help avoid such pitfalls.

The next pitfall is the logical outcome of the first one. Too much detail takes too much time; that is inevitable. The more time and effort is put into the UI prototype, the more attached and inflexible the web-developer becomes. Remember that user interface prototyping is often referred to as “rapid prototyping”, and that is for a reason. It is supposed to be rapid. Most of the time only a few pages of the whole website or application are prototyped – that is enough to test and confirm the concept. So you can easily avoid this pitfall, too: Once the basics are agreed on, move on to the next stage.

Another danger of user interface prototyping, particularly high fidelity prototyping, is that clients come to believe that what they see is the actual product that simply needs to be revised and completed, which makes them significantly underestimate the timeframe of the project. In reality what they see is a prototype, and the product is yet to be created from scratch. Prototypes only give an idea of what the product will be like, and in most cases, the code of the prototype cannot be reused. Be clear with your client about stages of the product development and time frame for each, what stage you are currently at, and what this stage will accomplish. Then it should be possible to avoid such misunderstandings easily.

Twitter has recently changed the user interface design of its startpage. The new startpage, visible when logged-out of Twitter, sports a much more refined user interface design in relation to its predecessor. In a sense it is reminiscent of the UI design of the Facebook startpage, complete with the continents and all, albeit with a Twitter-esque minimalism. What is great about the user interface design of both these startpages, besides being simple and easy on the eyes, is that users can sign up on the pages themselves. It all happens in one step. No having to go to another page only to presented with a convoluted list to fill out etc. Barring saved passwords and other log-in data, users new to these networks can get in on the act almost as fast as existing members. This low barrier of entry is even more evident on the Twitter startpage.

The user interface design of the new Twitter startpage features big text input fields and buttons for sign in and sign up. Each of the text input fields also features descriptive text in it. The attention to detail is evident as the font color even blends and matches with the color scheme of the user interface design. The result is text that is clear without being distracting. The right side of the user interface design is dedicated to sign up or joining. There is, however, more than enough space marking a very clear distinction.  The left side of the UI design  features a large search box inviting users to search Twitter, in stark contrast to Facebook’s closed wall policy.  Below all this are linked thumbnails from popular Twitter accounts further reinforcing the variety and utility of Twitter.

The BBC has recently released the third iteration of its acclaimed on-demand iPlayer media service to a slew of new features and a revamped user interface design. At first glance the layout of the interface design is less cluttered and now better demarcated easing web site navigation. This is partly achieved due to TV and radio content now separated into individual tabs. Each of these tabs has panels designed to help users find content fast and without having to think. The four panels at the top, in order from left to right, highlight ‘Featured’ content, ‘Recommended’ content linked to a user’s viewing/listening habits, ‘Most Popular’ content, and your ‘Friends’ recommendations. The latter feature requires users to register for a BBC iD and takes advantage of Facebook and Twitter APIs to make it easy to share and receive content. Each of these panels can be expanded to reveal more viewing options in the UI.

In addition there is a search bar at the top right of the user interface design that suggests results as you type them in, i.e. in real time. Below the four panels there are the TV/ radio channels on the left including a schedule for the previous four days. This makes sense because the site tagline is “Catch up on the last 7 days of BBC TV & Radio”. Users, however, can open the full schedule with a single click. To the right, below the fours panels is the ‘Categories’ area where content is divided into Music, Children’s, Comedy, regional etc. By default four different programs, each from a different category are highlighted. Another handy feature is the ‘Favourites’ right at the top of the interface design just below the search bar. Once a show has been chosen as a favourite, new shows as well as the last episode can be accessed from here. All in all the new user interface design scores high in usability and has impressive discoverability. On the down side I found the registration process to be lacking. I felt that the number of steps taken from signing up for a BBC iD account until activating Facebook and Twitter accounts was too high for a top mark. Nevertheless, a commendable approach to a functional UI design.

Despite leading the browser charts as the most successful browser Internet Explorer still remains much-maligned by all and sundry.  Internet Explorer’s apparent ubiquity seems to stem from coming bundled with Windows (leading to anti-trust suits against the Redmond giant). According to StatCounter IE’s market share has now fallen below 50%, perhaps a sign of things to come! Popular gripes about IE include the slower benchmarks in regards to the competition, such as Firefox. IE also lacked a download manager and hogged up more RAM.  Even more worryingly it came with a lot of unwanted add-ons and toolbars that made it even slower and negatively impacted the user interface design as website viewing space would shrink, requiring even more scrolling to see all parts of the UI.

IE9 is Microsoft’s way of staying relevant in a cutthroat industry and is currently available in public beta form. At first glance the interface design is minimalistic falls somewhere in between the really lean interface design of Google Chrome and Firefox allowing users to see more of the web. IE9 eschews the menu bar and the search bar giving the address bar and navigation controls more prominence. The address bar now also doubles as the search bar thereby simplifying the interface design. Coupled with Bing, which displays certain info as you search (such as a photo of the person you’re searching for or weather conditions etc.), IE9 lives up to Steve Krug’s first law of usability because users have to spend less time thinking and clicking through processes to accomplish critical user tasks.

The popularity of web applications is also given due prominence. IE9 now allows users to pin their favorite web apps (be it social network, webmail, or music streaming services) to the Windows taskbar, meaning easy one-click access to the most-used online services right through the interface design. After all, first opening the web browser and then clicking on a bookmark is about to become so passé. Coupled with other long absent and asked for features, such as a download manager, Microsoft has shown that the browser wars are far from becoming stale.

Hot on the heels of Microsoft’s re-boot of its Hotmail service, Google has tweaked and added features to its Gmail service, incorporating new options nicely into its user interface design. One of the features that I really liked was the ’sweep’ inbox management system which, considering that 90% of all webmail traffic is spam, is a welcome addition. And it’s not just spam but all the social networks, newsletters etc. and other websites that we sign up to sending us all manners of notifications that we may not want to unsubscribe from, but which are not that important. These last type of mails are known as “bologna” or “ bacn”. Somewhere in all this are actual important emails from friends, family and work that are actually what e-mail was precisely designed for. Gmail now has a new feature entitled Priority Inbox to combat this type of email overload.

I found the Priority Inbox to score high in usability as it was very simple and straightforward to setup and use. Nestled at the top right of the user interface (UI) design along right next to the settings, it is easy to find and utilize. Activating it offers users the chance to watch a short video describing the new service, should users wish to see it. An overlay appears that already sees Gmail suggest what are important and less important mails. Users can confirm this or change the suggestions. Important emails are unmistakable due to having a yellow mark along with the subject of the email. Priority emails naturally appear above the general inbox in a corresponding folder. This feature is sure to make an already popular online service designed for web 2.0 users much more manageable than it already is.

For many years now, outsourcing has resounded through the land. But still it is linked in our heads with big companies which give some work away because they either do not have the capacity to carry out the work themselves, or want to save money by using this strategy. However, nowadays it is not only big companies anymore who try to gain from this process, but more and more small businesses and private people.

The advantages of outsourcing

But what are the advantages of outsourcing and how can these be generated? The system is easy. If you as a company – (whether a small or big one) – would like to give previously performed in-house tasks to an external provider, you can simply give the contract to a third-party who you will pay to carry out the task on your behalf. The main advantages include cost savings, being able to focus on your core business, overall being able to improve the quality while increasing flexibility at the same time. Collaborating with external experts allows customers to calculate their business costs more precisely because the costs only occur for a certain period of time.

But how can you find such an external provider, and how do you know if the price you are paying is not too high and if the proposal is really the best you could get? One possibility is: Using global internet platforms which arrange services for you in order to meet your individual needs. One of the biggest in Germany is twago.

Facebook has added a so-called panic button to its security interface design for users in the UK. This new feature will allow minors to report suspicious or inappropriate behavior of adults (or others) to the authorities. The new addition is a part of Facebook’s collaboration with the Child Exploitation and Online Protection Centre (CEOP). The British government-run organization is dedicated to ensuring  that minors are safe when they surf the web. To this effect, they have requested updated security features from various social networking sites. Facebook is recovering from an explosive internet safety controversy in the last few months, so its newest user interface security feature sends a clear message that user safety has become a priority. According to Facebook spokesman Andrew Noyes „both Facebook and the CEOP have shared interests in keeping young people safe online.“ Thus, both organizations will complement each other as they work toward the mutual goal of privacy and security for youth.

With the global smartphone market estimated at $2 billion and the iPhone (a product that did not exist 3 years ago) accounting for 40% of Apple’s revenue, it is an understatement  to say its future is anything but bright. According to research2guidance, the market is set to reach $15 billion in 2013. Which players appear set to be the winners and loosers of this boom? As things stand Apple is far ahead of the pack. A January report from the research firm Gartner found that the app market in 2009 was 99.4% Apple’s. Despite this, other stores, particularly Android, are currently growing at a much faster pace.

According to eco (the German Association of Internet Businesses) handset manufacturers seemed poised to continue their hegemony over the smartphone app market despite more and more cellphone carriers, such as Vodafone, planning their own app stores.  But they might be simply too late to the party. With handset manufacturers in pole position, OS platform providers such as Microsoft come in second.  With this in mind it would seem that the combination of creating your own handset and platform is all it takes to challenge the market leaders but one must not forget what made the Apple App Store a success in the first place.
One of the important things that made the iPhone and its App Store a success was their ease-of-use, i.e. high usability and great interface design. Compared to other mobile platforms the iPhone was intuitive and did not have a labyrinthine menu layout. The capacitive touch screen coupled with the interface design of the OS allowed for revolutionary Human-Computer Interaction that was seamless. The app store also well and truly brought e-commerce to mobile phones with an interface design that allowed users to browse apps as if they were music on an iPod. Android would pack a lot of the same functionality but on a more open platform that could be tweaked by handset manufacturers as evidenced by HTC’s celebrated Sense User Interface design. So, really, challengers should strive for a great interface design in addition to whatever features they may be planning to differentiate and market their offerings.