More and more websites are developing innovative user interface designs.

Many Samsung fans were waiting impatiently for the release of the Samsung Galaxy S2, expecting the new user interface design to awe them with some great features. I am not one of those people; I never owned older Samsung smartphones. Nevertheless, I think that the user interface design of the Samsung Galaxy S2 is quite impressive.

Samsung Galaxy’s user interface design is based on Android, which can be an advantage in itself for Android lovers like me. To be more precise, this smartphone is equipped with Android 2.3.3 with Samsung’s own addition to the user interface design called Touch Wiz.

As simple as it sounds, the thing I like most about this device is its display. Galaxy S2’s display is significantly bigger than that of most other smartphones, and it has outstanding (nearly eye-killing) brightness and contrast. The touchscreen is sensitive and supports motion gestures. In this its user interface design is similar to that of the iPhone but it also has some nice surprises. For example, you can mute the phone by flipping.

Another feature of the user interface design that I particularly enjoy is a multitude of virtual keyboards and languages. I sometimes write in Russian, and since Russian contains more letters than English using a virtual keyboard for Russian has always been an issue for me. Galaxy S2 pleasantly surprised me. Entering text in Russian couldn’t be easier. The user interface design is equipped with different options for entering text, like Swype, Android or Samsung. You can switch languages by swiping across the space bar.

All in all, the Samsung Galaxy S2 is said to be one of the best smartphones that came out in 2011. It is incredibly slim, has a neat user interface design and a very powerful processor. Whether or not it is the best I can’t say, but it is certainly a great toy to have!

Social networking websites are dominating the internet. As domains such as Stumbleupon, Twitter and Facebook are becoming portals through which we explore other websites, it’s hard to ignore their business potential. Whether you want to set up your own social network, are interested in advertising through these sites, or are impressed by the layouts of these pages, it’s a good idea to take inspiration from these user interfaces. One way you can explore what elements you should take from social networks is through user interface design tools. With user interface design tools, you can prototype your website design before you invest time in programming. The prototypes you make with user interface design tools can then be shown to end users so they can give you feedback on what works for them.

How to get the most out of your user interface design tool
When you are creating prototypes with your user interface design tools, bear in mind that social networking sites revolve around the user.  This is reflected in the user interfaces of these sites, where users are invited to customize their profiles. When you are working with user interface design tools, you should remember that users can become overwhelmed by the information they have access to. What’s important is that the information is simplified and easy to find. The best websites therefore offer easy-to-use search functions and navigation tool bars. Another element that’s particularly successful in social networking sites is call to action buttons. Remember that sites such as Twitter and Facebook want to encourage their users to participate and provide content for the website. With user interface design tools you can emulate these elements of social networking sites. User interface design tools give you the potential to test out call for action buttons and see where on the screen they have the most impact and what size they should be or what the wording of the calls to action should be.

User interface design tools are all about usability
There are a great many features that you can take as inspiration from social networking sites and create with user interface design tools. The most important aspect is usability. Remember that these sites are focused around the users and therefore simplicity is key. User interface design tools let you focus on the users of your website and can be a great help if you want to see how your users will react to your new site design. User interface design tools can be used to experiment with your ideas and create the most user-friendly experience for your audience.

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.

In one of my earlier posts I looked at the benefits of using an online wireframe tool, which range from easy access, collaboration and sharing opportunities to absence of maintenance requirements. In this post I will cover potential limitations of a online wireframe tools, how significant they really are and what you can do to handle them.

Many would say that an online wireframe tool’s biggest advantage, its universal availability over the Internet, can pose a threat when the Internet speed is insufficient. That is frequently a reason why web-developers prefer desktop applications: they feel that an online wireframe tool might operate slower than its desktop equivalent. How much of a problem is that in reality? With a bit of research, it is easily determined that the average speed of Internet connection is ever increasing. Only in 2009, for example, South Korea averaged at 14.6 Mbps, being the first, and the US – at 3.9 Mbps, being number 18. A humble 500 Kbps is usually enough to work successfully with an online wireframe tool, which is available practically anywhere in the US and in most other industrialized countries.

Another concern of online wireframe tools’ opponents is that an online wireframe tool is dependent on the Internet connection, and Internet coverage is not universal. According to recent Internet usage statistics data, there are over 2 billion people online in 2011, and in North America alone nearly 80% of the entire population is connected. People can access the Internet from a variety of spots across the globe. Recently years have seen a movement called “travel as a way of life” rise: people can now travel and work anywhere provided they have a laptop. Internet coverage is taken as standard pretty much everywhere. So if you were to go on vacation and had to use your online wireframe tool, you would probably have no difficulty.

Another issue I would like to address is how an online wireframe tool deals with sudden access interruptions. No doubt, at times equipment fails or Internet problems occur. What happens to the results of your work then? One of the ways that some online wireframe tools have chosen to deal with this is that they allow users to continue working until the connection is restored. All the changes are kept in the browser, and as long as the browser is not closed, the project will be saved as soon as the connection is back. Other online wireframe tools have a frequent auto-save function to keep potential loss of work at a minimum. Even if the power went out and the user had had no chance to save the work, it will be stored safely on the server in the same condition present at the moment of last access.

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.

One of the anticipated directions  with regard to the major operating systems is the unification  between desktop OSes and their mobile counterparts.  One does not need to be a soothsayer or have a crystal ball to make such a statement as there are already clear indications that this is currently underway. The developer previews of the upcoming Windows 8 borrows the ‘Metro’ user interface design introduced in Windows Phone 7 for a dual mode OS that is optimized for both desktops and tablets. As for the Macintosh platform the latest iteration ‘Lion’ has ported a number of ideas taken from iOS over to the desktop. The result of this is that some Mac apps that are optimized for Lion end up with a user interface design that is also tablet friendly. Arguably the best example of this is iPhoto ‘11, which when viewed in Lion’s full-screen mode features a user interface design that could be mistaken for an iPad app.

How can one put the Mac OS X user interface design on an iOS device?

The trend seems to mostly be one of desktops taking user interface design lessons from their mobile counterparts. However there appears to be some user interface design elements from the desktop that at least some users want on their mobile devices. Users of jailbroken iOS devices, for example, can now tweak their device to clone the user interface design of Mac OS X by way of a mod called Ultimatum. This goes beyond just the look of the user interface design as Ultimatum is more than just a theme. In terms of functionality Ultimatum gives users a fully usable Mac OS X menu bar, dock (scrollable in this case), Finder windows, widgets, login lockscreen and more. So far Ultimatum has only been shown running on an iPhone though the app might be more useful running on the larger screen of the  iPad.

According to respected analysts smartphones (tablets too) represent the future of computing. The user adoption figures for these mobile devices is nothing short of staggering, thanks largely to Apple and Google’s Android. Their more portable form factor and streamlined, intuitive user interface design has already revolutionized the way we use the web. According to Morgan Stanley 2015 will be the year were these mobiles devices will become the foremost way we surf the internet. Already many major websites, such as Amazon have introduced tablet-optimized versions with user interface designs that, arguably, possess better usability than their standard desktop counterparts. Characteristics of these mobile inspired user interface designs include cleaner, less noisy UI design with bigger buttons and less fat, if I may call it that.

Two aspects that may be considered major drawbacks of mobile devices are screen size and, more significantly, processing power. With tablets screen size is not that much of an issue as with smartphones, which require more thoughtful user interface design to make the most of the smaller screens combined with our fat fingers. The other limitation is in processing power as dual-core 1Ghz CPUs with their 1.5 gigaflops are only as powerful as the fastest computer from 1985! Chip company Adapteva has unveiled the Herculean 64-core Epiphany IV chip capable of 70 gigaflops at a miserly single watt of power! This could herald the day when mobile devices are able to incorporate the most exquisite and processor hungry user interface design elements that we have become accustomed to on our desktops.

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

Don’t Try to Solve or Implement Everything into a User Interface Design

When creating a website or web app it is important to adopt an iterative design process. Instead of creating an ultimate list of features and taking an eternity to add them it helps to only focus on the most crucial needs and then build on them in a cyclic process. Focusing on features makes it easier to add more to the list. This can come in the shape of user feedback particularly in the beta stages but also through in-house usability testing. Imagine a user interface design team creates clickable wireframes and unveils them to the rest of the firm.

These stakeholders might in turn wish to help by providing their two cents in terms of great features that can improve the clickable wireframes. These suggestions could then prove to be an unneeded burden however good they might be. That is, unless, all but the more pertinent “no-brainer” user interface design ideas are kept for the next upcoming iterative cycle. One of the paradigms of user interface design today is that less is more. Developers and user interface designers have to prioritize the most pertinent ideas. User feedback, analytics and usability testing on wireframes help decide and justify what to include and what not.

Ask the Right UI Design Questions Early On

It is also important to remember that there are always going to be surprises, or Black Swans, that can come out of the blue and derail a team somewhat. Asking the right questions as early as possible will keep developers and user interface designers as prepared as possible for the unexpected. These questions range from which users are being targeted and in what use cases will they be using your product. Will they be relaxed in leisure time or in a business context? How much might they be willing to part with to access your service? Answering as many of these questions as possible is a way of building a solid foundation for better web applications.

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.