Axure and UI Prototyping Best Practices
Last updated:UI Prototyping is a very important step most software engineers and developers either don't know about or just see no point in doing. I've just had the experience of doing just that - a standalone UI prototype using a Software Tool called Axure 6.5.
The tool itself is, generally speaking, quite friendly although it must be said it was quite a small project so I can't really say whether or not the tool can perform when the scale grows too large (a website/program with many screens and functionalities.)
One minor issue I detected with Axure was the difficulty to place widgets and containers correctly when changing from page to page. In other words: we generally want bars, containers and other common layout elements to stay in the same position when changing from page to page; otherwise you get an unpleasant discontinuity when you navigate between pages where the same elements aren’t correctly aligned. Doing that in Axure was not as simple as it could be.
In the process of using this tool for a College Assignment, I tried to put into practice many so-called UI best-practices we always hear about but never quite get the time to test.
Some of them are: (some of them I took from whatever HCI-Related Literature we could get our hands on; other we created and think make sense. If you can't tell which were suggested by HCI gurus and which were suggested by me, I'll be very glad indeed!)
Same terms for the same things - this is a very common pattern and it's one of those things we don't take notice of when it's done when but can really affect User Experience when done badly or not done at all. Each section/functionality/purpose your application has should have one and only one name. I'm sure every one of us remembers at least one occasion when it took us quite some time to figure out that two terms/words in an application were, in fact, referring to the same thing. E.g.:if you choose to call a section of your website "Kids' Corner", you must stick to it. You can't call it other names in other places, like "Kids' Area" or "Kids' Section";
Breadcrumbs - this is a time-tested functionality that's become so common in applications (in particular web Applications or web sites) that most users will expect it from you and will resent you not having added it.
Lorem Ipsum text - you have surely seen prototypes with Latin stuff written on it. At the first time you may have thought it just plain odd but on the second time you've seen it with the same words you get a feeling you're looking at a pattern. Lorem Ipsum text has been used for a long time in situations where the text is not important, but you still want your users to feel what the application will look like when it's used in real life (with lots of text). Since it is nothing more than gibberish written in Latin, people will just ignore it and keep their focus on the layout.
Generic Images - along the same line as the previous item, you generally don't want to place pictures that are too detailed in a UI Prototype. Unless your prototype is meant to be very low level, you'll probably want your users to keep their focus on the layout and interactions you've set up in the prototype. Use generic images like image placeholders to give the feeling of images while at the same time not detracting your users from evaluating your layout Prototype.
Many ways to do the same thing - if your users have many ways to access a resource (e.g. a specific page on your website) it'll be more likely they'll be able to reach it and they'll be more able to navigate your application/web site. E.g.:It is OK to have a sidebar, a breadcrumb and another link perhaps all which point to the same page.
Short text blocks - this is an important one. If you need to display a large amount of text on the screen (like on this very page, for instance) you really want to split it into manageable (no longer than 10 lines each) bits of text, preferably with subheadings between them so people can better locate themselves in your text. Remember that, on a computer screen, people don't generally read lots of text. They scan the text quickly to look for the information they want. This can really enhance the User Experience in your application/website.
Sans-serif fonts for the screen - there's a general consensus that sans-serif fonts are better for the web. So let's just stick with this advice, shall we?
Use masters to help your layout - for lack of a better word, I use the term Axure itself gives for these template layouts that are used throughout your application. I'm not sure whether this can be done with other tools: Axure does it quite painlessly. E.g.: If you have many pages on a website and they all have the same menu, then extract (a nod to Martin Fowler here) the menu onto a master and use it on all pages. That way, if you change the master, it'll get changed on all pages that use it.
Color-coded sections - this is a good idea as well if your website or application has many different sections that users might get confused about. By assigning a color (careful not to overdo it; light pastel tones close to white are better in my opinion) to each section, users can subconsciously detect what section they're in and avoid costly mistakes. E.g.: If you have a large ERP-like software, it might be a good idea to, for example, have a light green background for all titles of pages that are related to Human Resources; another colour as background for titles of pages related to Stock Management. And so on.