Category — Rapid Paper Prototyping

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.

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.

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.

Developing any user interface can be a challenge, but designing a VUI (Voice User Interface) comes with its own unique set of obstacles that developers must grapple with.  And they are different from those that designers of GUIs (Graphical User Interfaces) are faced with.  One of the major mistakes that a designer can make when working with a VUI is buying into the misconception that a VUI is a just simplified, telephone version of a GUI and thus requires a similar design approach based on a similar set of issues and challenges.  This mindset couldn’t be further from the truth.  In order to better understand how to craft successful and optimally usable VUIs, it is important to note the differences between the two user interfaces in order to achieve the results that providers and users expect.

Internet usage and connectivity varies greatly around the world. In Germany, around 72% of all households have internet access. While this may seem high, especially when put into the context of developing countries, it still means nearly one third of all households lack internet access. One of the reasons for this could be age and the age-related habits or requirements of elderly people. In Germany, 60% of adults use the internet whereas 80% of 10-13 year olds use the internet. Statistics from the US reveal that overall 79% of adults use the internet, but on further inspection one can see that the number of 18-29 that use the internet, at 92%, is double the amount of those aged 65 and over, at 42%.

Another reason could be differences in income or social status. On a macro level, the countries with the highest number of computers per people and households with internet tend to be those with the highest GDP. Within those countries, households from a lower socioeconomic background tend to have less internet access. In Britain, this led to the then premier Gordon Brown to start an initiative to provide 270,000 economically disadvantaged families with laptops and free internet connection. China, with 298 million users, has the most internet users in the world, but considering its huge population that only means that 22.4% (below the world average) of their population are using the internet. Africa by contrast has an average internet penetration rate of 8.7%.
Could the reason a third of the population in countries like Germany do not use the internet be due to inadequate interface design and/or usability issues in general? While many popular websites have interface designs that are designed with the best usability principles in mind, they often focus on younger age groups – not only in content and functionality, but in important areas of interface design. These include small to medium font sizes or navigation elements that require good eye-sight, screen layouts that are unfamiliar to people used to print products, complex navigation schemes and a plethora of options to select, as well as terminology and language which often includes modern non-native terms like “Home”, “Account”, “Login”, and the like. All these elements of an interface design pose potential barriers to use by older people.

Aside from other reasons for the lack of 100% internet access at home – such as people not feeling the necessity perhaps having (free) internet access at work, school, wireless access at their favorite cafe, or even from their mobile phone – usability and interface design issues may help explain part of the large portion of the population that still doesn’t use the internet. This shows that in order to improve and facilitate internet use for certain groups in the population, such as the growing group of elderly people in developed nations, their special requirements in terms of usability and interface design will have to be catered to. This may well open new market opportunities, such as accessible internet and others. Yet, there needs to be more, perhaps even special arrangements by providers taking into consideration the needs relating to content and layout of interface designs with special settings or access options for certain population groups.

While internet access is a good indicator of internet use, statistics on this indicator do not tell the full story. Consider these facts: The mobile phone application market is expected to grow to $15 billion by 2013. In places like Africa the leapfrogging aspect of mobile phones means that it is easier and cheaper to access the web via a phone than to have internet access at home, leading to a large percentage of internet users not accounted for by internet access statistics. In addition, it is worth noting that internet use can never be 100% of the population considering that some people, like those in prisons, are often not allowed to use the internet.

Who are the others?

It would seem, however, that social networking has reached a critical mass and is at a crossroads. Until now, there have been largely closed and centralized environments along the lines of mobile phone carriers that only allow you to call others who use the same provider for free. In addition to a solid interface design and usability foundation, the best ways (David’s slingshot, as it were) to challenge Facebook is on issues of privacy, data ownership and decentralization. Already a number of notable projects are in the works that address those issues and I shall briefly mention a few. The Appleseed project is working to create an open source, fully distributed and decentralized social networking software. In effect any entity would be able to create compatible websites which users can join. And if you decide you don’t like the site you’re on, you can sign up for another Appleseed compatible site and immediately reconnect with everyone in your network. OneSocialWeb is creating protocols that allow for communication between social networks meaning that if you meet a friend on another network you wouldn’t have to create a new profile just to connect with them. Perhaps the project that picked up the most buzz is Diaspora, “the privacy aware, personally controlled, do-it-all distributed open-source social network”, after it received pledges of $175,000 from over 4,600 people on Kickstarter after asking for only $10,000! It will be interesting to see how social networks will evolve over the next couple of years.

How does portability enhance user experience?

It is also worth noting that the web apps, being built with standard web tools, would function on any web browser supporting these technologies. What will set Chrome apart from other browsers is the ability to easily find and create convenient shortcuts to access these apps. According to Glen Murphy, a Chrome user interface design team developer, another important UI design principle of Chrome is “cutting Chrome back to absolutely nothing… moving towards this simpler, high performance approach”. This approach is going to open many opportunities for web developers and interface designers to create enriching apps that will make browsers even more ubiquitous and useful, at least as far as the desktop is concerned.

This is the last part of my three part Usability Spotlight on Google Wave.

What are further usability drawbacks of Google Wave and its interface design?

In seeking to replace email, Wave ends up eschewing one of email’s great usability features: simplicity.  Wave packs so many features that it is too noisy and complicated for the average user, creating a higher barrier to entry. According to the technological evangelist Robert Scoble “the noise often happens way down in a wave deep in your inbox… New email always shows up at the top of my inbox, where Google Wave can bring me new stuff deep down at the bottom of my inbox”.  Although I could relatively easily start new waves with extensions, I found myself confused on how to apply extensions into my existing waves. This feeling of powerlessness simply led me to give up trying. According to Usability Shark Wave’s IM features are a nuisance for being so closely tied to being a wave. Wanting to have a quick chat with someone means creating a new wave or joining an existing one thus making him supplement his work in Wave with a true chat client. In terms of the interface design the scrollbars are unconventional and not really adhering to usability standards. Another usability gripe is the lack of integration with other Google Apps such as Docs and Maps. Although there is an extension for Maps, you’ll have to start your search from scratch when using the extension. It can be argued that Wave is after all still in “Preview” mode – meaning these discrepancies are sure to be tackled within time. Yet, considering the fact that Google is always eager to link as many of their services together, you’d have though they’d have a solution for this for the preview, or maybe I’m asking for too much.

In conclusion

Niels Bohr once remarked that those who think they understand quantum mechanics do not understand quantum mechanics. Carrying on with my physicist’s analogy, Wave seeks to be a paradigm shift yet it appears to be far beyond the faculties and needs of the average user. In trying to provide a unified field theory, if you like, of Internet communication and collaboration, Google ends up biting more than it can chew. Barring a massive leap forward in interface design and usability being presented at the upcoming Google I/O developers’ conference, mass adoption is still a long way away (at least in tech terms) and most users are still better off using their favorite email, IM, and web apps for the moment.  Wave still holds a tremendous amount of potential and Google’s plans to release Wave as open source code (allowing others to create their own independent Wave platforms) is encouraging for the improvement of usability and interface design of Wave. In its current guise Wave is great for brainstorming. In terms of real-time communication and collaboration, specialized applications exist for specialized fields,  such as pidoco˚, a rapid paper prototyping tool for wireframing and graphical user interface design, which already allow teams to collaborate on interface designs through the use of clickable wireframes. With pidoco° you can invite others to view, annotate and/or edit your wireframes or even undergo remote usability tests – all through a web browser without the need for downloading any software. For interface designers, for example, there are powerful alternatives, and Wave in its present guise will not necessarily improve their real-time communication and collaboration but might even hamper it. Nevertheless, the future of Wave as a protocol is bright.

Google Docs the imperfect: Downsides to the web interface design

Unfortunately, Google Docs is not heaven.  There are various aspects of Google Docs that decrease its usability, but the biggest pitfall of Google Docs is that its document and spreadsheet formatting features have performance limitations. This decreases the efficiency of use and can be a source of great frustration for users as the process of reformatting documents can be annoyingly time consuming. Google Docs also lacks the ability to perform simple functions such as copying and pasting images (you can insert them, but then you must reformat them) and users beware: if you want to find and replace text, don’t do it in Google Docs.  There is a find and replace function, but it is labeled as ‘experimental’ and using it will replace all instances, because you do not get to choose what to replace.

In terms of error frequency and efficiency of use, Google Docs may be at a disadvantage still: Users who expect the Google Docs interface design to behave exactly like the quasi standard Microsoft’s Office are sure to be disappointed.  Not only do documents uploaded onto Google Docs from Office usually not retain their original format. The user interface design – despite some broad resemblance – differs in its details substantially from desktop-based MS Office. Some searching will be necessary. Another thing that in my opinion could be improved is the setting of text or cell colors. Unlike with MS Office applications, color settings are not preserved and thus need to be set anew each time.

Google Docs: A flawed bastion of usability

Google Docs may be imperfect, but overall it remains a bastion of usability in the arena of online office suites. Yes, it fails to provide many of the useful and detailed formatting features that are familiar from Microsoft Office, but this does not harm its overall usability. What Google Docs lacks in design detail, it makes up for in practical accessibility.  Google Docs’ main usability strengths are its dynamic approach to real-time collaboration and its ability to meet the needs of diverse groups of users, providing them with instant access to their documents and co-workers from any location.  Overall, Google Docs is an application that merits mention as a good example of a user-friendly piece of software.

Our conclusion of pidoco°: It’s got the look and feel of pen and paper, but adds interactivity (making wireframes animated) and accelerates developing speed through re-usable elements and layers. Many (real-time) collaboration modules enable interface designers to new ways to work with higher efficiency, leaving more time for the creative process that really counts.