Category — Interface Design Software

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.

This is the first part of my two part blog post on building better web applications.

For many a business today a web presence is absolutely crucial in finding other avenues to increase revenue through e-commerce or just simply to increase goodwill. For many businesses their website or web app is the hub of their business activities. Ten years ago a company website was a relatively simpler affair as arguably most browsing was done on desktops. Nowadays smartphones, tablets, and other devices with similar form factors have crashed the party and taken their fair share of the browsing pie. Morgan Stanley analysts  reckon that their share of the pie will be bigger than desktop browsing as early as 2015. This stratification of browsing across devices and form factors makes good user interface design  much more crucial in order for businesses to stand out from the crowd. There are three things that user interface designers and developers need to keep in mind to meet all these particular needs:

1. Focus on user tasks and not features.
2. Don’t try to solve everything.
3. Ask the right questions early on.

Focus on User Tasks, Not Features With the Help of Wireframe Software

One of the pitfalls when creating websites and web apps is for developers and user interface designers to give too much weight to a dream feature list. The problem with emphasizing functionality and technology is that the users can get overlooked unexpectedly. In the end a user interface design can be created that incorporates all the wished-for features but is lacking in terms of user experience. In order to avoid this it becomes important for developers and user interface designers to adopt a user centered design approach. Involving users early on in the development process and conducting usability tests using supporting tools like wireframes or interactive GUI prototypes is bound to produce insights that can be overlooked when just focusing on features. There are a number of wireframe software available to user interface designers  with the best of them allowing for the creation of clickable wireframes which can also include interaction design. Certain online wireframe tools even go further than clickable wireframes by allowing user interface designers to cheaply conduct remote usability testing.

This is the first part of my two-part blog post on persuasive design vis-a-vis user interface design.

As Graphical User Interface designs increased in sophistication, hand-in-hand with the increasing power of personal computers, new UI design techniques have been added along the way. In order to create better user interface designs strategies have been coined ranging from interaction design, information architecture, experience design and content strategy. At the beginning of the internet there were barely any user interface design conventions which led to a lot of websites suffering from poor usability. At the same time the internet was developing so fast that a lot of user interface designers simply had to improvise. Despite all the advances in user interface design, many websites todaystill suffer from poor usability despite the fact that web users are notoriously fickle with an attention span that can be measured in seconds. In today’s competitive landscape a user interface design should not only score well in terms of usability but it should also persuade users to come back again and again. This is particularly true with regards to e-commerce websites.

What Approach to User Interface Design Does Persuasive Design Take?

Persuasive design in user interface design refers to creating a user experience that seeks to impact a user’s attitude or behavior not through coercion but through persuasion. In a way persuasive design is akin to Soft Power in international relations, whereby the goal is to make users like (hopefully love) using your websites user interface design. Desireability is key here, building on top of a usable user interface design that has been made useful with the right content strategy. A user interface design can be made more desirable by focusing on the behavioral context of a user. What, for example, would be the motivation behind a user using a website? What would be the ability a user needs to adequately navigate a user interface design and complete tasks? Persuasive user interface design is more concerned with why users do what they do on a website whereby interaction design would be more concerned with how they do it. In the second part of this blog post I shall look at some examples and underlying principles of persuasive user interface design.

Reading tech news of late gives one the impression that the PC is going the way of the dodo. “Post-PC” has become a buzzword to describe this current computing zeitgeist that we are supposedly in. Computer manufacturers themselves seem to be throwing the towel as HP, the world’s biggest PC manufacturer, announced it was following IBM’s lead and exiting the consumer PC business altogether. The suggestion seems to be that the PC industry might have peaked and that there is not much more in the way of innovation, both in terms of hardware and user interface design. Buy a Dell, an HP, or a Samsung laptop and chances are that there is not much separating them. As some players leave the PC business others are keen to enter it. Razer, the computer peripherals maker, has announced what they are calling the world’s first true gaming laptop. The likes of Alienware, Origin, and the discontinued, HP-owned, VoodooPC may take offense at that statement but then again the Razer laptop truly brings something new to the table. Gaming PCs till now have tended to be specced up versions of standard PCs albeit with fancy casing.

Already from the outset the Razer Blade laptop takes an uncompromising approach by being 0.88 inches thin where most gaming laptops are bulky. The touchpad is also placed conveniently to the right of the keyboard, which makes better ergonomic sense than the standard touchpad-below-keypad configuration. Although this may not be much of an issue during every day computing but is crucial for usability when it comes to gaming. The trackpad itself is also very novel, particularly with regards to user interface design. I know I can see the thought bubble forming in your head wondering what user interface design has to do with a touchpad? And surely the ergonomic advantages can’t change the user interface design of the laptop? What is novel is that the touchpad is a touchscreen featuring a custom user interface design. The Switchblade UI is a customizable “all-new innovative user interface designed from the ground up to make your gaming experience more efficient, intuitive, and exciting”. Above the multi-touch panel are 10 dynamic buttons that can be set to shortcuts etc. The possibilities of the Switchblade UI are endless and would be a welcome addition on any laptop.

Adobe has now released the public beta of its ambitious web and user interface design application Muse. To be fair graphic design software would be more apt but Muse is clearly intended for the creation of web sites. The basic premise of Muse is as a web and user interface design tool that works like InDesign, Photoshop, and Illustrator from the flagship Creative Suite tools. The main difference is that Muse will not be available to buy but as Software-as-a-Service for a monthly fee. With Muse users can create user interface designs by combining graphics, text, and other user interface design elements using the workflows of desktop publishing.

Not having to code the user interface design is an appealing factor. Muse is obviously directed towards graphic designers and one glance at the websites so far made with the tool seems to confirm this. Many feature lean and clean user interface designs showcasing artistic and creative work but there are a few for small businesses too. The question remains whether Muse can be used to create larger more complex websites, such as an e-commerce website. Muse for example doesn’t have a real content management system, which is what essentially brings a user interface design of a website to life.

Muse runs with Adobe AIR and is therefore not a native app. This means that it can run on Mac and Windows but it also makes it light with minimal footprint. The user interface design of the app itself is very much like InDesign. In fact the user interface design team was the same one behind InDesign. To tool is slated to be released in early 2012 so there is plenty of time for feedback to further improve it

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.

With the advent of Web 2.0 Facebook has become the undoubted king of the hill leading to an A list Hollywood film with the humorous tag-line “you don’t make 500 million friends without making a few enemies”. Since launching its Facebook Connect set of APIs, there has been a proliferation of third party websites incorporating Facebook log in functionality in their interface design. Considering the large number of Facebook users and the central part social networking plays in users’ web habits such a move lowers the entry barrier considerably. The ability to sign up with a few clicks would entice users who find having to register and enter all kinds of personal information a convoluted process.

How has the social web impacted the interface design of web browsers?

As APIs from various social networks found themselves to the interface designs of various websites, the browser itself largely remains untouched. Mozilla Labs had experimented with an in-browser tool called Ubiquity that was used to post data to social networks. Other add-ons have also tried to bring the social web closer to the browser. Two browsers, RockMelt and Flock, have championed the integration of the social web into the fabric and interface design of the browser itself.  In the rest of this blog I shall look at RockMelt, which recently released a limited public beta. The browser is based on the open-source Chromium from which Google Chrome draws its code. By that virtue RockMelt’s interface design and functionality is similar to Chrome.

How does RockMelt incorporate the social web in its interface design?

One of the most striking things about RockMelt is that you have to log in when you start it. After authorizing it to connect with your Facebook account the browser instantly customizes its interface design to your social circle by way of slim sidebars to the left and right. This leaves plenty of space for the browser to be, after all, a browser. And while browsing the web users may update their status and post links to Facebook and Twitter (the only services supported at the date of writing) from the interface design of the browser itself. Built-in clients allow you to access your news feed or even manage multiple Twitter feeds. By incorporating social networks into the interface design of the browser itself RockMelt could streamline surfing the web as users won’t have to have extra tabs open and the ability to access feeds and post would mean less clicks.

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.