Rapid Prototype Blog

Archive for the ‘Prototype Homepage’ Category

This article is part of the series Information Architecture for wireframes using Justinmind Prototyper

A Navigation map of you site will help you understand the pathways users take, helping you create shortcuts, cutting off unnecessary pages or steps, reducing bounce rates and increasing usability. It is very important to create the flowcharts before designing the wireframes.

Collaborative work

With Justinmind Prototyper, your navigation map can be commented and all requirements can be linked to specific pages with drag and drop, so, for example, the Project Manager can write that page 2 needs a login, the Information Architect can describe what kind of content goes on the library page, and the designers can change sizes or typography, and annotate that on the project. All comments will be saved and organized in a database, which can be filtered according to many criteria.

Advantages of interface-flow diagrams

On AgileModeling.com, Scott W. Amber says “User interface-flow diagrams are typically used for one of two purposes. First, they are used to model the interactions that users have with your software, as defined in a single use case. For example, a use case can refer to several screens and provides insight into how they are used. Based on this information, you can develop a user interface-flow diagram that reflects the behavioral view of the single use case. Second, (…) they enable you to gain a high-level overview of the user interface for your application. This overview is effectively the combination of all the behavioral views derived from your use cases, the result being called the architectural view of your user interface (Constantine and Lockwood 1999). I prefer to take the high-level overview approach, also referred to as the architectural approach, because it enables me to understand the complete user interface for a system.” http://www.agilemodeling.com/artifacts/uiFlowDiagram.htm

He mentions several sources and articles related to the subjects on his site, so it’s worth a visit.

Tip: KISS – keep it simple, stupid

Flowcharts don’t necessarily need all information you’ll have on your website: just what’s crucial. You’ll have more information on your homepage than described, but obviously, you just need the things you think your users will need less. For more info about it, please read Steve Krug’s website (http://www.sensible.com/)

Presented as a small, nearly inconsequential feature on the Gibson Lifestyle newsletter is an article featuring video of the Gibson Robot tuning system. Not so newsworthy. . . until you realize that the system is installed on an EJ160E John Lennon ROund Shoulder acoustic.
Video Rating: 4 / 5

Those that already create a prototype before investing too much time in any problem already know: there are several blind spots and mistakes designers do unwillingly. And those can be avoided by testing and validating the wireframe through several phases, from drawing to high fidelity prototype.

Most of those are common, but some can be really difficult to detect without a test:

Users getting lost while navigating

You know all the content of your site. So, you’ll never get lost, and you always know where you are. You know the site by heart, since it was a wireframe. But should this section really be where you think it is? Leaving hints like breadcrumbs or having colours for different sections is important, but also is testing content categorization.

Blindspots

You think everyone will look at your red-and-yellow banner at the centre of the screen, don’t you? Sorry, they won’t. And it may also happen with other objects. Sometimes, designers and clients become so obsessed with a colour or a photograph that they’re sure everyone will pay attention, but due to several different factors, it doesn’t happen. Testing can uncover some of them.

Standards exist for a reason

It may happen that you have a great idea for a different navigation model, direction or structure. It may be a breakthrough, but also can be a big flop. There’s a reason because most sites today have two or three columns, the main one is bigger, and a big header with navigation on top: it’s become a standard, and everyone is used to look for them there. If you need to create something different, it can be great. But, please, test it until you’re sure users won’t get confused and leave your site empty.

What to do if I find a problem?

If you’re using Justinmind Prototyper, add a comment, and the Ux designers and product managers will know there are some mistakes. Correct them. Adjust. Test again. Rinse and repeat. It always works.

Keep it easy – overexplain if needed

Remember that not everyone come to your website from the homepage. With the increase of Google’s visitors, the number is always bigger. So, it’s important to explain to them what your site is about, and what to do when they get there.

Help your users. Think of them as a foreigner in your country. Although they want to be kind and start a conversation, you created the place, you know the rules and you must teach them (in a kind way, no one wants to be bossed around) how to behave in your website.