Goal of the wireframe:

To showcase a page representing a personal blog of a politician. The wireframe uses low fidelity to emphasize the size, labeling and position of buttons.

Here is the wireframe:

This wireframe reveals a few problems with the design of buttons. To begin with, the meaning of buttons in the top navigation is not sufficiently clear. Low fidelity of the wireframe only emphasizes this issue. If this wireframe was done in high fidelity and buttons were colorful we might not be able to see that apart from the first, home button, the icons are not obvious at all. Perhaps, the designer assumed that the user can guess navigation or hover over the buttons to find out what they are. However, from this wireframe it is impossible to understand where these buttons take the user. The solution would be to put straightforward text labels next to icons.

Another problem that I can see on this wireframe is that button labels on the page have the same font and the same background color as the rest of the page. Perhaps, the color scheme is explained by the fidelity of the wireframe, but the font should be slightly bigger than the rest of the text.  It is also useful to be consistent in labeling, and use either verbs or nouns (or verbs with nouns together).  On this wireframe the author attempted to use verbs, but I would suggest supplementing them with nouns. The message and the call to action would be clearer if buttons said “Submit Comment” or “Subscribe to Newsletter”.

Lastly, as I already mentioned in previous wireframe reviews, it is not a good idea to put a “back” button only at the bottom of the page. Users should not have to scroll down to find this button.

To sum up, buttons should be prominent, large enough and consistent between themselves and with the rest of the website. In my next post I will continue analyzing wireframes that bring up button design and other important user interface design issues.

Goal of the wireframe

The wireframe below represents a home page of a multimedia company. The wireframe is done in low fidelity to focus on the navigation design of the website. Here is the wireframe:

The Pluses of the Wireframe

I like this wireframe because it is simple, low-fidelity and shows instantly just how inconvenient the navigation is. The wireframe’s fidelity makes the problem more visible – colors and images would distract us from navigation.

The Minuses of the Wireframe

I have no criticism of the wireframe itself. What I would like to discuss in more detail is the usability of the navigation concept. According to the wireframe, in order to get from one page to another the user has to click the radio button that corresponds to the page they want to go to. After they check the radio button the content scrolls to the needed position. To be fair, even on the low-fidelity wireframe the design concepts look original. Moreover, the wireframe shows that some principles of navigation design were observed: the design is consistent, and the user can see where he is.

Nevertheless, the wireframe shows a somewhat unusual navigation pattern that many users may not be familiar with. What struck me when I saw the wireframe first is that there are too many items in the navigation menu. To make it worse, you have to read all of the text sideways. The website seems to be relatively small, which is why I would recommend keeping only the main items for the top menu. In my opinion, a radio button is not an appropriate way to select the needed page. It is bad for two reasons. Firstly, it is hard to see which one is selected at the moment. Secondly, would such a minute click area be convenient for everyone (like older people)? I would much rather use a few horizontal tabs.

While the wireframe itself is well-done, the navigation concept should be reconsidered in this draft. Usability testing with this wireframe would probably reveal that users are accustomed to tab navigations on websites. In further wireframe reviews I will address more elements of user interface design and usability flaws related to them.

Who are information architects? In essence, information architects are specialists that classify and categorize information to make it more structured and easily accessible by the target users. Information architects are compared to actual architects in that they create a plan (or a catalogue) for the future site. If you are wondering if you would make a good information architect, consider taking a questionnaire called Am I An IA? from the Information Architecture Institute.

Now let’s get back to our main question, that is, how wireframe software can be useful to information architects. The wireframing process is often compared to laying the foundations of a building. In this sense, information architects can use wireframe software to plan the information base of the website. They do not have to use the actual text on the wireframe – normally blocks of standard text provided by the wireframe software is used instead. Wireframe software can help categorize information and create clear labels.

Wireframe software can also be helpful for an information architect in planning navigation of the website. Clear and consistent navigation is one of the most important aspects of a website’s usability. With the help of wireframe software information architects can create screen flows and imitate processes that will happen on the actual website. Wireframe software can even help reveal potential usability flaws in the proposed design.

Even though information architects are not always involved in the wireframing process, their importance in the planning process cannot be disputed. Remember that if the user can’t find what he came for no amazing design or special effects can compensate that. If you are developing a website, particularly if it contains a large amount of data, do consider getting a professional information architect into your team.

Goal of the wireframe:
Create a low fidelity wireframe of the homepage of an e-shop that sells one product, namely organic compost tumblers.

Here is the wireframe:

The Pluses of the Wireframe
Wireframes are intended to provide focus during critical design decisions. So, most importantly, this wireframe focuses on the main idea of the website, without introducing any distracting elements. From this wireframe we can see what the main information on the home page is: product image, introductory paragraph and product highlights. Since it is a one-product shop, the wireframe is quite simple, which means that the website is also quite simple. Apart from the home page, other important pages are the product page, which can be accessed from the tab “product” and from the button “learn more”, the purchase page which can be accessed from the tab “purchase” and from the button “buy now” and the FAQ. It is clear what the structure of the website is: tab navigation buttons leading to the most important information items are on top, and extra page links of secondary importance are on the bottom. In terms of information architecture and navigation, this wireframe is representative of a clear and reasonable information structure.

The user interface design of this website is simple. And that is a good idea. A one-product web-shop must be simple and attractive enough to convert visitors to buyers. The less possibility there is for confusion, the better it is for the website.

The Minuses of the Wireframe
I think it is hard to go wrong with a wireframe as simple as that of a small one-product website. It is a great first step to determine the key elements on the website and their relative position and size. One piece of criticism that I have, however, is that the text looks a bit cramped. It could be better to break the introductory paragraph up into two and perhaps use a bigger font. Some additional information on the actual content of the paragraph could also be helpful as a basis for decision-making.

I give this wireframe a score of 4 out of 5.

Goal of the Wireframe
Create a low fidelity wireframe for a homepage of a female vitamins website.
Here is the wireframe:

One might be tempted to embed an actual video in the wireframe, but this would be a feature of a high- or medium-fidelity wireframe. At this stage it might be a better idea to use just the placeholder or perhaps a static image to determine what percentage of the page footprint the video should occupy later.

The Minuses of the Wireframe
Now, what may be the flaws of this wireframe? Firstly, the use of colors may be problematic. On the one hand, they make the wireframe look lively. On the other hand, they may detract from the original purpose of a wireframe. A wireframe is not designed to demonstrate the visual design of the user interface but rather as a helpful tool for discussing the layout and content of a page. Colors are usually the first thing that attracts attention. The spacing between elements and the convenience of navigation become secondary to the viewer when there is something so bright in the design. Discussion of this wireframe in a team might go straight to the appropriate color scheme for the website. Our objective, however, was to create a low fidelity wireframe so we should refrain from colors.

One might also criticize the actual interface design reproduced by this wireframe. One of my suggestions would be to use tabs for the upper page navigation instead of links. This is just a customary practice, and it is easier for the user to see what page they are currently on when they see a particular tab open. Links are not as straightforward. Nor do they not look as professional. Also, using the company logo at the top left corner of the page to return to the homepage has become a quasi-standard in web design. Here the logo is placed below the navigation area in the content part of the page, and it is not clear whether it fulfills the same purpose.

I give this wireframe an overall rating of 3 out of 5. More wireframes reviews will follow in my next posts. If you would like me to give you feedback on your own wireframe, do not hesitate to drop me a line.

To begin with, user interface design is part of systems engineering. It occurs most frequently in the context of human-machine interaction and involves software as well as hardware. We are used to thinking about user interfaces as facilitators of human-computer interaction but machines are not only limited to computers. User interface design is, for instance, part of any appliance we use in the household: washing machine, microwave or DVD-player control panels. Car or aircraft navigation dashboards would also be good examples of user interface designs. User interface design tools help design, test and improve the ease of human-machine interaction in each of these situations to achieve high usability.

Now, the questions is, if interface design is such a versatile concept could we use the same interface design tools for creating user interfaces in different industries? The answer seems simple. One would say that we could not use the same interface design tool to prototype an aircraft navigation panel as we would use to design a mobile application. The interface design tool must depend on the type of user interface that is being created. It is certainly true that one interface design tool would not be suitable for any task but, on second thought, all interface designs tools have one objective: ensure usability.

In any industry the interface design process includes similar stages, such as research and summarizing requirements, creating a concept, 2-dimensional computer design, 3-dimensional computer design, creating an actual prototype, prototype testing, refining and polishing the design. When you think about it, why can’t we use the same user interface design tool to assist the development process of different products at any of these stages? Actually, many rapid prototyping companies are already using similar techniques and user interface design tools to prototype products in a variety of industries, from electronics to aerospace. Perhaps, interface design tools will become even more versatile in the future, bringing together web development and industrial design.

No need for installation is one of the biggest benefits of online wireframe tools. Web-developers can use web-based wireframing software at any time on any computer anywhere in the world. The only thing that online wireframe tools require is a web browser and good Internet access.

Because online wireframe tools are available remotely, they enhance collaboration on the project. Team members can work on wireframes from any location, without having to install common software or download and send each other the created wireframes. Even more than that, a few online wireframe tools even allow for real-time collaboration, which means that a team can work and make changes on the wireframe simultaneously, with other team members being able to see this, for example during a phone conference. This is a fantastic teamwork opportunity and a great time saver, especially in distributed teams.

Another benefit of using an online wireframe tool is that no maintenance is needed for it. It is the software provider’s responsibility to keep the software up-to-date and running, eliminate any bugs and improve any potential usability flaws. Every time the user comes back to the website he can be sure that the version he is using is current, and he does not need to make any upgrades or pay for additional installations just to get the latest version – everything is provided.

That all said, any online wireframe tool has also certain limitations. What they are, and how to cope with them I will cover in one of my next posts.

• To begin with, ease of use; even an interface design tool should be user-friendly. It should take a minimum amount of time for any web developer to learn how to navigate it. Every once in a while clients wish to participate in the development process as well so it is helpful if the interface design tool does not require any specific knowledge of programming or web design. A good interface design tool should provide a variety of elements to use, which must be easily operated, for instance, by drag-and-drop.
• Moreover, good interface design tools must provide options for sharing projects. It is important to be able to invite other team members and allow them to view or edit the project – this enhances collaboration within the team and ensures faster development. A good interface design tool should also allow users to download or save prototypes to send them to clients. The formats of these prototypes must be supported by common software tools. Or, in the case of web-based user interface design tools, they should support all main web browsers. This means that all clients will be able to view them regardless of their browser preferences.
• Lastly, the interface design tool that has all the above mentioned properties should be reasonably priced. While free interface design tools or free versions of paid interface design tools do exist, most of them do not entirely satisfy the aforementioned criteria or require one to pay extra for full access. The best deal are the interface design tools that allow a free trial period, which would be enough for you to test them and decide for yourself whether or not they are convenient to use and worth paying for.

The user interface design of the app is based around three panes. The left pane houses the main navigation with finger friendly buttons to all of Facebook’s main features. At the top of the left pane sits a search bar which boosts the discoverability of the user interface design. The navigation can be swiped into and out of the screen to reveal more of the other panes (there is also a button at the top right of the middle pane). The middle pane forms the crux of the user interface design and it is here where the news feed, inbox and profile are to be found. The right pane is more contextual appearing when viewing messages, for example, and not at all when viewing a profile. However clicking on the likes and comments of a post brings out the right pane with the actual comments on it. There is a nice user interface design touch when the rest of the screen is darkened so as to help users focus on the chosen content. The user interface design of the Photos section also has a native app feel to it that is welcome for browsing on a tablet. Browsing through your friends list is similarly pleasing as the user interface design features large photos. All in all third-party Facebook apps have their work cut out for them and will have to assert themselves in novel ways (such as MyPad+ integrating Twitter with Facebook).

One of the major challenges YouView’s user interface design is going to have to address is how to display content in a way that is fair and reasonable to all content providers. Just like how the first page of search results drives more users to particular links the limited amount of content that the user interface design can display at a go will favor some over others. Being able to sort the content of the user interface design into most popular, alphabetical and similar sortings could address this shortcoming, at least partly. Another way is how the channel allocation on the default user interface design will follow the traditional linear TV grid, which is set by a government regulatory body saving YouView the responsibility.