Category — Wireframe Software

In part 2 of this 2-part blog post I shall look at Search Engine Optimization and tree-testing in relation to findability.

Search Engine Optimization can help improve the findability of your website

How you organize the structure of your website’s content as well as how you implement web standards and conventions is important for search engine optimization (SEO) because search engines can only react to standard representations. In addition, the organization of your interface design affects its SEO ranking. Considering that search engines are arguably the most commonly used online tool, a website’s search ranking can potentially make or break a website. Simply put, search engine optimization is the art of science of increasing traffic to a given website. This is done by optimizing structure, text content, photos and videos to increase a website’s visibility on search engines and other web 2.0 portals such as Facebook. Another way of doing this is through interface design whereby a website appears the same in different web browsers, and without errors. After all what good is it to create a wonderful interface design if it may appear broken to a significant number of users. Using a number of different portals to generate more inbound traffic from different sources also results in higher search engine rankings which begets more traffic. Other considerations of SEO, even though they don’t necessarily have much to do with interface design proper, include incorporating particular keywords and key phrases even and recoding a website to make it more crawl-able by search engines.

Usability tests can help determine the findability of your site content

As mentioned in part 1 of this blog, the best way to determine the findability of your interface design’s content is to conduct iterative usability testing. One usability method that is particularly helpful when evaluating and optimizing findability is tree testing. The information architecture of interface designs is in most cases organized in hierarchies. These are referred to as trees (with subsections “branching” out). Tree testing, also known as card-based classification or reverse card sorting, seeks to find out how well users are able to find information within a website’s hierarchy. Remember, tree testing differs from traditional usability testing in that it is not done on a wireframe prototype or the website itself but on using cards (or software) of a simplified text version of the site structure. A typical tree test is as follows:

1.    Users are given a “find it” task (e.g. look for the breakfast menu).
2.    Users are then shown a list of the top topics on the website (as they might appear in the main navigation)
3.    They choose one and then are shown a list of subtopics (such as in a sub-menu of a navigation)
4.    They continue choosing, backtracking if necessary, until they have found a topic that completes their task.
5.    The test conductor has the user repeat this process several times with several different tasks
6.    After several users have completed the tree test, the results are analyzed by the design and development team.

For the reasons mentioned above, findability should be an important consideration of every interface designer.

Copying or paying tribute to the Bing interface design?

While it is no doubt an excellent idea to reinvigorate a user interface (especially when you make an images interface all about the images), the changes to Google Images are not necessarily new per se.  Google’s new interface design is strikingly similar to Bing.com’s Images user interface design—in fact it is almost uncanny.

Of course it would be unfair to call Google unoriginal in its interface design choices.  After all, it’s the details of an interface design that matter in the world of good usability.  In this case, Google seems to have picked up a good interface design idea and improved it through yet a more prominent display of the images through their larger size.  Everything that rises out of the creative world is influenced by what came before it.  Good ideas are infectious and if Google took a page from Bing’s website then that means they obviously liked what they saw.  That is the give and take in the world of interface design, painting, even literature.  Variations of what is working well for someone else.  Still, time will tell how well Google’s users respond to the new changes.  But for now, Google continues to surf the wave of internet success, being authentic in many instances, but also not afraid to concede and adopt good interface design solutions.

But now let’s look at the interface design features that struck me: OnLive’s interface design is, in a word, cinematic. Upon starting the program a small overlay opens up requesting log in details. The background of the menu screen is made up of a number of small screens with running games, supposedly being played that moment by other users. The layout of the interface design is nicely suited to video games as there aren’t too many menu options, and it’s clearly designed to be easily navigable with a control pad. Choosing one of the menu options, such as the Marketplace game store, reveals breadcrumbs at the top of the interface design – one of those usability best practices. When acquiring a demo, the top right of the interface design layout of the games menu displays how much more time users have to play the game until they must purchase or rent the full-version. All in all, this is an interface design that is refreshing and easy-to-use, which is a great plus with online gaming services.

OnLive’s greatest challenge to date is keeping the lag down to a minimum of micro seconds. When streaming video, buffering time of 3 seconds is manageable. While playing a video game, 3 seconds could well mean game over. OnLive feels to me like a service intended for use two years from now (ready for use in Japan). The service is currently only available in the US where only 25% of broadband connections are faster than the 5 Mbps threshold needed to use it. Despite this, the service holds promise, working and sporting the same interface design on multiple formats such as PC, Mac, Linux, TV and even the iPad, which may make it a triumph of interface design.

New to Safari’s interface design is the Reader function which can be activated when Safari detects that you’re on a web page with an article. In that case, a grey button called Reader appears in the address bar at the top of the interface design. Clicking on it renders the button purple to show that the button is turned on. An overlay appears over the website with the article clutter-free along with the corresponding picture (if any). Onscreen controls for zoom, print and email are integrated into the Readers interface design. An interesting new feature is the introduction of Extensions (a feature other major browsers have had for a long time now). It will be interesting to see how extensions might improve Safari’s interface design and popularity further.

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.