The Guardian, a major British national daily newspaper, has long received critical acclaim for its website which is also incidentally one of the most visited English-language news websites in the world. This success may not least be due to the influence of a superior interface design employed by the creators of the website, which greatly enhances usability. The website’s interface design is very efficient in layout and design allowing users to easily delve into the full gamut of news on offer along with clearly defined clickable breadcrumbs, helping users navigate easily to further subsections of the website.

What decisions led to this type of interface design?

An independent programmer name Phil Gyford has now offered users a unique streamlined way to enjoy the Guardian. Using the Guardian’s Content API he thought to tap into the need to consume news with the ease of a newspaper. No matter how well designed a newspaper’s interface design on its website may be, they all require users to actively navigate through separate sections. According to his personal blog, Phil Gyford “wanted something with reduced friction. There should be as few difficult decisions as possible, nothing harder than ‘shall I turn the page?’. I wanted to avoid having to make a big decision before reading an article. It should be as quick and effortless as possible, as close to how easy it is to start reading an article in a newspaper”. This statement speaks volumes to the importance of the ease of use with which end users (in this case the readers of the digital paper) can understand, utilize and navigate an interface design. With usability being one of the most noticeable determinants of quality online, its impact can not be overestimated, especially when addressing such a diverse audience as the Guardian does.

In this blog post, inspired by a TheNextWeb blog entry,  I shall talk about a few things interface designers and web developers should consider when embarking on creating a new app, regardless of the platform. The 2005 animated film ‘Robots’ featured the following catchphrase “see a need, fill a need” in essence as a motif. Market research is crucial. If you have an idea you want to develop look around and see what programs or websites are already out there catering to that market or segment. Positioning your website or software application to cater to a previously unmet market demand is a great place to start. If you happen to be developing an alternative to already established (and popular) players in a market you have to ask yourself: How am I going to do this better? What unique selling point(s) will my product have over my rivals’ products? A case in point is webmail, which is a very crowded and competitive marketplace. If you want to start a new webmail service, for example, what features are going to make users want to use your service rather than, say, Gmail or Yahoo. But features are not the entire story.

The Facebook privacy features controversy has left many users wondering whether it is worth continuing their relationship with the social networking site. According to a recent poll conducted by the IT security firm Sophos, nearly two thirds of Facebook users are considering leaving the site all together, with 30% of respondents saying that it is highly likely they will quit Facebook over privacy concerns and an additional 30% of respondents regarding this a possibility.

In addition to the 60% of potential Facebook defectors, 16% of users claim that they already have logged out permanently so to speak. It is truly astounding that in just a few short months approximately 75% of the social networking hegemon’s users are dissatisfied enough to seriously consider leaving the site for good if they have not already done so. According to Sophos’ senior techonology consultant, Graham Cluely, „the majority of people we polled are fed up with the lack of control that Facebook gives them over their own data.“ Users find Facebook’s privacy features interface design convoluted and confusing. Confusion unavoidably leads to frustration and, as many interface designers know, frustration often leads to abandonment.

On mobile devices, interface design challenges steer users towards dedicated apps

Today’s web browsers, enabled by always-on internet and the cloud computing model, can be used as a conduit for all ranges of applications unthinkable when Mosaic, which would morph into Netscape Navigator, debuted. According to TheNextWeb article, the tide is starting to turn in favour of native apps again. Chief reason for this is the rise of smartphones and their respective app stores. To make his point the author uses the example of Twitter which is used 81.43% of the time through an app rather than the website.

Even on the desktop apps like Spotify, the music streaming app, eschew the web browser save to entice visitors to download it. However for every Spotify there are more, such as Grooveshark and Last.fm that deliver their services through their website. The web browser, reliable connection permitting of course, still holds a number of advantages. Web browsers are ubiquitous and come bundled with almost every computer regardless of operating system. The cloud also offers the advantage of availability. Sure, apps like Spotify and Steam, the video game delivery app, can be signed into from anywhere in the world but you have to go through the hurdle of downloading and installing them first!

According to the Nielsen Group’s iPhone usability studies, users prefer using dedicated apps than using a browser. From a usability and interface design perspective this is understandable due to the nature of small screens on smartphones whereby the interface design of mobile browsers is severely restricted by the size. This, of course, requires a rethink of interface design hence mobile optimized websites and apps.  On the desktop, meaning most computers, the browser remains king.

To be fair the thesis put forward by Boris and Adam Richardson does not try and play Nostradamus and predict the day when web browsers will become extinct but rather browsers will become more and more invisible, perhaps echoing Dan Norman’s seminal concept of The Invisible Computer. Nevertheless, with cloud computing conquering the business world, such as Salesforce’s CRM software, Google’s Docs office software, or Pidoco’s wireframe software, the web browser will for a long time still be very much in use, even if less visible.

I wrote this blog post inspired by an article by Boris on TheNextWeb in which the author pronounced “The death of the website” after paraphrasing Adam Richardson’s “the death of the browser” pronouncement. Both pronouncements are arguably astute but I wanted to add further comment regarding what they mean for interface design.

Things, as the old adage goes, come and go in cycles. The same goes for the world of software applications. Before the World Wide Web took off, software on PCs mostly got there by way of a native software application.  You had specific programs on floppy disks and you’d install the ones you need. One type of application, the web-browser, would prove to be the single-most versatile app of all. Whereas native apps tended to fulfil a clearly defined task such as desktop publishing, email, or spreadsheets even, the web browser would rise to be a swiss knife of sorts.

In this blog post I shall look at design patterns as a usability method in 2 parts. In part 1 I shall look at what design patterns are and the advantages of using them in interface design.

What is a design pattern?

Design patterns are a useful method for the interface design of websites and software programs. One of the hallmarks of humanity is the evolution of our empirical collective body of knowledge that succeeding generations have built upon to get us, a relatively feeble creature, to where we are today. Anyone wishing to start a fire to prepare a meal does not have to accidentally discover fire first! In the same vein design patterns are a collection of solutions to typical problems encountered during the interface design of web sites and software programs. Over time these interface design problems have been documented and paired with solutions to assist all interface designers be they a novice or a seasoned professional.

What are the advantages of design patterns in interface design?

One of the ways of ensuring good usability in interface design is to always adhere to usability standards. These standards have been tried, tested and proven to work. Design patterns are there to assist you in solving the common problems encountered during interface design, including usability issues, thus enabling you to optimize your time much like a shortcut takes you to your destination faster. Design patterns sum up best practices and can be thought of as a template or guide that interface designers can use as a direct solution or a starting point to fine tune their interface designs.  Design patterns are also useful because they function as a code or standard that can be used by software developers, interface designers and other stakeholders to communicate and collaborate more efficiently. Novices can become accustomed to them and rely on their proven success, while professionals can share and show their expertise. Design patterns are also continuously being updated, tested and improved upon by an ever growing community of information architects and interaction or interface designers.

This blog post is the first in a series of two about paper prototyping as a usability method.

What is paper prototyping?

Paper prototyping is a usability method that is widely used in the world of interface design.  The purpose of paper prototyping is to assist designers and developers with the development of software, websites, or web applications that cater to the needs of the user.   Paper prototyping became a popular usability method during the 1980’s and 1990’s, as blue chip companies such as Microsoft and IBM began to use it as an integral part of their interface design and usability testing processes.

Paper prototypes can be used for rapid prototyping because they represent a model of the potential final product (the user interface design) that can easily be edited or discarded.  Paper prototypes are low fidelity (the level of detail in a prototype) and are sketched by hand using a pencil and paper, hence the name.

This blog post is the first in a series of two about brainstorming as a usability method.

What is brainstorming?

Brainstorming is a usability method used in interface design that software or web designers can use to gain helpful user experience feedback and constructive user ideas. Brainstorming is a process in which individuals or groups use creative and critical thinking to generate alternative ideas and solutions for a given topic or problem.  Brainstorming, a term coined by Alex Faickney Osborn in the late 1940’s, emphasizes quantity over quality: participants should come up with as many ideas as possible without worrying about whether or not they are “good”.  Brainstorming is a method rooted in the understanding that notable ideas spring forth when thinkers are given the freedom to think without experiencing the stress of value judgments applied to their thoughts.  The idea is that less pressure increases the creative flow.

What are the benefits of brainstorming?

In addition to enabling groups to come up with a wide range of interesting ideas, brainstorming also facilitates group cohesion.  Brainstorming groups are able to collectively discuss problems and thoughts,   deepening each participant’s overall understanding of the topic at hand.  Through actively engaging in the creative thought process with one another, the brainstormers’ experience boost their morale, enhance their work enjoyment, and improve their teamwork.

From a usability standpoint, brainstorming is an especially appealing usability method because it enables collaboration and creativity, but most importantly, because it does not require methodological expertise on the part of the participants.  This is significant because a goal of usability is accessibility, and when designers want to get helpful user experience feedback, it is imperative that the range of potential brainstorming participants is not limited to users who possess expertise in the field.  Oftentimes, the feedback of beginning or inexperienced users, who look at a user interface design with neutral eyes, is what allows designers to determine just how easy their software or web interfaces are to operate, and thus enables them to create a great interface design.

Collaboration is essential to the success of many creative or business endeavors. The confluence of diverse ideas, perspectives, and strengths propels the project forward and gives each team member a sense of purpose and accomplishment. According to Greengage consulting, a firm dedicated to helping individuals and companies achieve organizational effectiveness, organizations that develop their collaborative skills “will transform the way [they] work with colleagues, partners and customers” (greengage.com) often resulting in a more successful end product.

In the world of web interface design, the concept of real-time collaboration has become a crucial aspect of the web development process as it takes regular old teamwork one step further. Real-time collaboration makes it possible to work together across large distances effectively, because it allows several people to cooperate by editing various types of documents simultaneously, oftentimes while in direct contact via audio or video conferencing systems. Real-time collaboration usually occurs online, and so the internet is a crucial enabler for this modern form of team work. Real-time collaboration poses challenges to technology and man as it requires instant communication, i.e. instant relay of data in the form of audio-visual and textual information. More and more providers are moving to real-time collaborative applications, and they can be found in various fields.

Applications such as Google Docs, MindMeister or Pidoco optimally facilitate real-time collaboration because they are provided as software-as-a-service via the internet and thus enable easy access for different team members or project partners from all across the globe. In addition, their interface design is oriented towards a dynamic and team-oriented working environment, focusing on ease of use and catering to users who appreciate the advantages of real-time collaboration.

Google Docs is a free data storage service that allows users to create, edit and share documents online, enabling them to collaborate easily in real-time with other users. In addition to permitting the concurrent viewing and editing of documents, Google

A wireframe is a visual representation of the projected content of a graphical user interface that allow designers to test, refine and adjust software user interfaces to improve user experience and functionality. They are particularly useful in the collaborative process as they ensure that stakeholders can keep track of a project’s workflow. Special wireframe tools or wireframe software can support this process effectively. Wireframes come in either two main guises: low fidelity or high fidelity. In this blog I shall explore both types and their usefulness for user interface design, and more:

What are low fidelity wireframes?

Low-fidelity wireframes are wireframes that focus on the essentials of a user interface: layout, structure, Information Architecture – not design! Low fidelity wireframes evolved onto computer screens from rapid paper prototyping wireframes which emerged in the mid 1980s to become a popular Blue Chip company tool by the mid 1990s. Rapid paper prototyping involved the creation of rough drawings (sometimes drawn by hand) of graphical user interfaces as prototypes of software applications to visualize and test usability.

What are the main benefits of low fidelity wireframes?

1. Time: Eschewing many cosmetic factors, low fidelity wireframes are faster to create and thus allow you to quickly tackle fundamental issues regarding the usability of your interface. Suggestions and refinements can, also, quickly be incorporated into software prototypes for further fine tuning.

[Read more →]