Category — Wireframing Tools

What else has changed?

Users with a WizeHive account can now log in with their Google account. This enables them to access Google Docs from within WizeHive’s interface design and link the appropriate documents to specific workspaces. Data can also now be tagged thus adding to the usability of the software tool offering users a way of organizing information in way that is meaningful to them. In addition to these changes, WizeHive has released a free iPhone app that manages to cram as much of the functionality of the web-app into an interface design that fits the iPhone’s smaller screen real estate. Changes such as these further underscore WizeHive’s easy-to-use collaborative interface design concept and point into a future direction of pushing aspects like collaboration and mobility even further.

Overall, the interface design changes seem to have a positive effect on the usability of the application and they may be a good example for other tools to follow.

How do users use the Guardian’s interface design?

For Phil Gyford, this meant creating a website with a unique interface design that features nothing more than a page that starts with the leading article from the daily newspaper. The date features at the very top of the page. The main navigation options are clicking right and left (for next and previous article respectively) thus meaning that users have no option but to read articles in the order presented. Users can however jump between sections (namely the main section, sport, g2, and film & music) right from what the developer has tentatively called the “sparkline/scrubber” at the top of the interface design. This same area of the interface design also indicates in red the current page as well as article length for users to be aware of where they stand in reading the daily edition.

Further considerations of this interface design

The choice in interface design works with the developer’s intention to improve the readability of the news content as there is no other clutter (in the form of links to all sorts of other articles, adverts etc.) around the article, which means that users can fully focus on one article. This consideration is of particular interest as studies have shown reading speeds on digital displays to be up to 10% lower than for traditional print products. The clean interface design of the Guardian also adds to the finishability of a day’s worth of news, something very irksome to achieve going through a traditional news website’s every subsection. A feature that I feel could be added is a calendar that allows users to jump to a specific date (for those who missed reading yesterday’s newspaper for example).

Usability, user experience and a user interface design to match are key. You can have a great product that does a whole bunch of amazing things, but if packaged in an abominable interface design that frustrates users, you’re setting yourself up for a failure even if your interface design is aesthetically pleasing. Your product and its user interface design needs to be as easy to use as possible and this means getting feedback through usability testing from people that fit the profile of your target users. Thankfully a number of tools exist, such as Pidoco, that allow you to easily create wireframe prototypes of your product which can be viewed, annotated and/or edited (even going as far as conducting remote usability tests) long before the coding process begins. The advantage of this approach is that is makes rectifying glaring usability and interface design flaws relatively inexpensive compared to changes that become necessary after the implementation is already finished.

Aside from the features of an app, the usability of its interface design is a key differentiating factor, and it should be considered as a unique selling proposition. There are numerous examples of products and software applications that have succeeded, not least due to their superior usability.

Although such high numbers of users are threatening to pull the plug on their Facebook memberships, in all likelihood, the threats will remain threats. While it is true that people are furious that their private information is not being properly cared for, Facebook users will still have a hard time leaving the site because of all the social networking benefits. Facebook has become one of the main arteries in the social life of millions of people. It is a way to instantly and easily share life with all family, friends, coworkers etc. Pictures, videos, messages, chatting, fan clubs—Facebook is an outlet that allows users to participate in and share a diversity of interests. In reality, it is not so easy for a user to click the ‘delete account’ button. Perhaps Facebook should think about hiding this option in its interface design.

The poll numbers are also telling in terms of the potential mass user exodus. 60% of users only threaten to leave while 16% have actually left. This illustrates the fact that most people who are angry enough to leave have probably left already. This is not to say that people aren’t really mad—many, in fact, are livid. But the anger boiling in the blood of the 60% of users threatening to leave Facebook has actually led to a more positive Facebook evolution: in the past few weeks, Facebook has begun implementing changes to its security feature options in addition to simplifying its interface design. While the social networking site has a long way to go in terms of re-building client trust and respecting client privacy, the organization has proven that it is keen to take user experience feedback into account, even when it is apocalyptically critical. Because Facebook has allowed itself to succumb to self-reflexivity, their survival outlook remains good. For now.

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.

Website building applications

Website building applications provide users the ability to construct a website using design ready tools. Users build websites using templates and function or feature options provided by the website building application. With website building applications users only need to select their templates, functions, and features, and then simply enter in content, be it words or the uploading of photos. Website building applications provide users with coded, finished programs that can be published. Often, these website builders are included with hosting packages or are readily available in different quality levels. Be careful, since they often differ by ease-of-use.

Website builders are targeted at private individuals and very small businesses wishing to quickly create a simple, cheap web presence. Website builders limit users to the particular design or layout templates available, and while it is easy and quick to publish a site, it often does not fulfil all needs or wishes of users looking for a more advanced, customized website with functions not provided “off the rack”.

Wireframing

Wireframing tools allow users to create low or high fidelity wireframe prototypes as visual guides that lay out the structure of a given website and the relationships between the interface design’s pages. Wireframes are not finished code, and so they are not suitable for immediate publishing as a website. But they give the user much more flexibility regarding the user interface design of his website in the works, going far beyond the options provided by website building applications. A wireframe is an outline of a website’s structure that allows users to explore the following relative to their future interface design:

•    ideation: the process of creating new ideas

•    conceptualization: the formation and interpretation of concepts

•    usability tests: the process whereby users and designers evaluate a given wireframe prototype

Since wireframing is a before programming process, its goal is to give designers the ability to evaluate the converging and diverging features of the prototype in order to submit an outline that will eventually become a successful and usable interface design. Wireframe prototypes are an ideal way to involve different stakeholders in the process of creating a website, and in combination with usability testing, they lead to better interface designs for applications that professionals rely on for their commercial purposes, such as e-commerce shops or other portals. Wireframes are not meant to represent or generate finished code, and exist mainly as a basis for exploration and improvement of a given interface design. The implementation has to be done separately.

Which method best suits your needs?

If you are building a website, the process you choose depends on what you want and need. If you are constructing a website for personal use, for example for birth or wedding announcements, then website building applications are appropriate because they are simple and do not require much effort on your part. Since such sites often contain only simple information (text, images, links), your personal needs can be fulfilled by website builders. As long as you are satisfied with using their standard templates. If you have a bigger, more professional project in mind, such as creating an interface design for a corporation or for eCommerce purposes, then using wireframing software will allow you to follow a design process that permits you to create highly individual, interactive website concepts and in the process optimize usability. For example, programs like the Pidoco rapid prototyping software give you the ability to create interactive, wireframe prototypes that can e used in usability tests within the same software and facilitate your capacity to discern the requirements and constraints of your future interface design as they relate to usability and user experience. In summary, choosing between wireframing and website building applications boils down to your personal needs vs. professional needs.

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.

When organizing a task analysis, follow these steps:

1.    Assemble a group of 4-10 people (people can correspond with the amount of subtasks if you choose)

2.    Choose the task you want to analyze as a group (pretty self-explanatory).

3.    Break this task down into 4-10 ‘subtasks’. These subtasks should be logical and specified in terms of objectives. Make sure that your subtasks contribute to the overall synergy of the original task in question. Each group member should be responsible for a subtask.

4.    You can draw (or even wireframe) your subtasks as a diagram to ensure that all categories and objectives are relevant and logical.

5.    Commence with the ‘decomposition process’. Each group member should hypothesize the various ways in which users can perform tasks by testing out different methods on themselves or other group members. Make sure that your detailed analysis of job performance corresponds to cognitive reasoning. Encourage all group members to be as detailed as possible.

6.    Discuss results and determine ways to incorporate the information gathered from your task analysis into your user interface design.

Task Analysis Pitfalls

Task analysis allows you to build a model that organizes all the relevant information related to a task that needs to be accomplished by your users. However, the cognitive nature of this information means that a task analysis is more psychological than technological—the results are rather abstract. Thus, task analysis cannot really help you tackle technical or design questions outside the realm of direct user behavior information. The results have to be “translated” into a great user interface design.

Task analysis can also be tricky because it requires a very in depth analysis of very small tasks. This can be time consuming, so make sure that when you are conducting this type of usability method, you choose a group of patient and focused participants.

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

How to generate scenarios of use

Scenarios of use are not exceptionally difficult to craft, which makes them an attractive usability method.  Creating them, however, is easiest if you have a facilitator with strong communication and interpersonal skills—this helps boost group morale and creates an atmosphere that has a higher level of productivity.  When creating your scenarios of use, try to generate a number of scenarios that cover a wide range of circumstances, both positive and negative (the negative are called ‘misuse cases’).  You want to be sure to include misuse cases so you can investigate non-functional requirements such as the security and accessibility of your interface design.  You should go through all scenarios of use by yourself or with your group before you include stakeholders.

What are the 8 steps to developing scenarios of use?

According to Edward Kenworthy’s 1997 book Use Case Modeling: Capturing User Requirements the eight steps to developing scenarios of are:
1. Identify who is going to be using the website (this also works for other web-based, desktop-based or mobile applications).
2. Pick one of those actors.
3. Define what that actor wants to do on the site. Each thing the actor does on the site becomes a scenario of use.
4. For each scenario of use, decide on the normal course of events when that actor is using the site.
5. Describe the basic course in the scenario of use. Describe it in terms of what the actor does and what the system does in response that the actor should be aware of.
6. When the basic course is described, consider alternate courses of events and add those to “extend” the scenario of use.
7. Look for commonalities among the scenarios of use. Extract these and note them as common course scenario of use.
8. Repeat the steps 2 through 7 for all other actors.

What are the limitations of scenarios of use?

According to Alistair Cockburn, scenarios of use are an indispensable usability method, but they do not “take care of system design, user interface design, feature lists, or testing”.  Thus, scenarios of use can only assist you in laying the foundation for a great user interface design; scenarios of use help you hypothesize about your interface design, but they do not aid you in the actual feature design or edits of your prototype. Scenarios of use provide guidelines and suggestions only, but are still very useful because they help you identify the points in your interface design upon which you should focus design effort and subsequent usability tests.