Category — GUI Prototyping Tool

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.

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.

This is the second part of my 2-part blog post on design patterns in interface design. In the first part I looked at what design patterns are and advantages of using them. In this part I shall look further at the types and examples of design patterns as well as some potential drawbacks.

What are the different types of design patterns?

Design patterns are generally subdivided into three categories. Creational patterns are design patterns used to create objects that suit a number of software programming scenarios and mechanisms. Structural patterns are design patters that are concerned with the relationships and interactions of entities in your interface design. Structural patterns often deal with the functionality of your interface design. Behavioral patterns are design patterns that recognize common communication patterns between objects and realize these patterns. Recognizing these patterns makes communication more flexible and fluid during the design process. These patterns are exemplified by communication algorithms within or behind your interface design, or any commands that you may want your interface design to allow the user to execute.

What are examples of design patterns used in the interface design of websites?

An example of design patterns employed in the interface design of websites is Account Registration. Design patterns include best practices and can help prevent faux pas to watch out for when designing your website’s account registration process, such as not having a consistent design for the login and signup buttons as well as not making the said buttons easily identifiable. A design pattern would also tell that after a user logs in you should return them to the page they came from such as redirecting users to the comment form. Another example of a design pattern used in interface design is Tell-a-friend. This is used to enable users to share the content of your website with friends or anyone who might be interested with ease.

What are some drawbacks of design patterns?

Design patterns, like all methodologies, have been subject to criticism. Design patterns try to standardize what are generally accepted as best practices by computer scientists, information architects and interface designers. Standardization seems beneficial, but in practice it can result in the unnecessary duplication of code – a potential waste of time in your interface design. Using design patterns as a usability method in interface design can be difficult if one is not well versed with computer science. Although design patterns are not impossible to learn they may take some time and experience getting familiar with them in order to make the most of them. Yet, they may really be worth the effort.

What are the benefits of paper prototyping in user interface design?

From a usability and interface design perspective, paper prototyping has many benefits.  Paper prototyping is easy and requires no technical skills, allowing people of all levels of technical ability to participate in the design process.  Paper prototypes allow you to critically examine their interface designs from the start, thus avoiding the need to fix usability errors later in the process when fixing is much more costly than drawing up a new prototype.

Paper prototypes also lend themselves well to rapid iterative development because you and your team can experiment with several interface designs that can easily be tested for usability.  The simple nature of paper prototypes can also make users feel more inclined to provide detailed and constructive feedback because they are not overwhelmed or intimidated by the paper prototype.

What is task analysis?

Task analysis is a usability method that can assist you with the creation of excellent user interface designs. In addition, you can use the information obtained from a task analysis to design usability tests for your interface design. Task analysis is the thorough investigation of all the important factors related to the achievement of a given task. These factors include catalogued descriptions of manual and mental activities, environmental conditions, task duration, task allocation, and task complexity. Task analysis is concerned with ascertaining the most in depth understanding possible pertaining to how people perform jobs and what materials, tangible and intangible, they need to perform them well. Task analysis is a byproduct of Applied Behavioral Analysis, which was established as a theory in the field of psychology by Montrose Wolf, Donald Baer, and Todd Risely in 1968.

What are the benefits of task analysis?

The information gathered during a task analysis can be extremely helpful when planning a new user interface design. Since usability is at the crux of interface design, it is crucial for you to find usability methods that provide you with detailed information on how to design and/or improve your product. Task analysis is especially helpful because as a usability method it allows you to understand the requirements relating to the flow of information within your system relative to the cognitive reasoning, expectations, and needs of your users. Your task analysis can serve as a reference for testing the usability and value of the system functions and features of your fledgling interface design.

How to conduct a task analysis

Task analysis is a complete deconstruction of the tasks users need to perform using your proposed or existing user interface design. The results can guide you in the design or improvement of your user interface. When embarking on a task analysis, be sure to remember that your goal should always be to understand the use of your interface design relative to the cognitive task performance and understanding of your users. Task analysis is relatively simple in theory, but can be arduous in practice. This is because detailed analysis is the focal point of a task analysis—the more painstakingly thorough you are with your investigation, the more relevant information you obtain that will lay a strong foundation for the creation of a successful user interface design. So be prepared to spend a lot of time within the confines of inquiry.

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

What are scenarios of use?

Scenarios of use are a usability method used in interface design.  They are a description of users performing a specific task on your website or application to improve its specific functional requirements.  These user-oriented and task-oriented scenarios of use are short “stories” that incorporate steps a user (often referred to as an actor) takes to accomplish a goal in order to ascertain how a website or application responds to the user’s actions.  Scenarios of use are written in plain language to avoid confusion among participants.

What are the benefits of scenarios of use?

Scenarios of use are a valuable usability method for user interface design and GUI prototyping.  Scenarios of use permit you to avoid weaknesses within your program that might be detrimental to its success by allowing you to collect user requirements systematically and make any necessary changes to your program before you market it.  Scenarios of use are very helpful in establishing what your program or website does before embarking on the interface design process through the use of interface design software or other GUI prototyping tools such as the wireframe software provided by pidoco°. Scenarios of use are also advantageous because they require minimal resources to be generated and they keep the focus on users, usability and user experience. This ultimately leads to happy customers, making your software more successful.

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