Justinmind Blog

Another post from our series of freebies for Justinmind Prototyper’s users: now you can start to wireframe and prototype realistic Android apps. Based on Pavel Macek’s Android GUI PSD v.1.0, I created a template, some masters and some widgets for you to download and enrich your work.

UPDATE

The iPhone widget library is also available on our downloads section, along with other libraries for Justinmind Prototyper.

Justinmind Prototyper android template:

Just add the template to your screen and set it as default for your page.

Download the template for Justinmind Prototyper clicking here.

Justinmind Prototyper android master: slider

It shows up when you click on the grey box, and hides when you click again.

It’s a master. Add it anywhere in your screen. Everything you put inside the black box will be hidden until the user clicks on the slider.

To download the master, click here. To download it without the icons, click here.

Android home menu master for Justinmind Prototyper

It has the menubutton mapped, so it shows up when you click.

To download it, click here.

Android Widgets for your wireframe

Several icons, buttons and images for Android, including the search group.

To download them, click here.

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.

After finishing your project and presenting to the client, sometimes it’s needed to do usability tests with a prototype, to understand real users’ needs. So, you can export your hi-fi wireframe into HTML, or even test it remotely using Justinmind Server.

Before doing the test, is recommendable that you:

Prepare the test questions

• If it’s an eCommerce site, you’ll need the users to buy something.
• Maybe have them fill a form and submit it correctly.
• Ask them questions about information on the site: ex: “how much does the book Hamlet costs?” or “does this site ships to England?”.

Note that these tasks should be the ones users will do more frequently, and pay attention to their mistakes or if they don’t understand something. If it happens to them, may happen to other users.

Do not include hints, or help them complete the tasks. It’s important to understand what users feel difficult to do.

Start with the easier tasks. It helps them improve confidence, and sometimes users get nervous when they cannot complete the first task. Reassure them that there’s nothing wrong if they make mistakes. It’s their job to find the potential mistakes, anyways.

Remember always that when a user fails a usability test, it’s a win situation: you can correct something that can be very harmful and dangerous: investing time and money in a bad usability website.

Finding users for a usability test
It’s important to find potential users to your site. Do not test your social network for old ladies with your graphic design friends. They use computers and have different tastes, goals and approaches to a website.

It’s not needed to test with more than 5 people, according to some researchers. Most of the conclusions with more people are repetitive and come to the same results, so 5 is considered the magic number.

During the test of your wireframe
There’s no need to help the users. If the user cannot complete the task alone, it’s ok. Note that down, and reassure him that there’s no problem. Everything users do may be important, from what they do to what they say during the test. Note that down. After the test, ask users why they’ve done something you didn’t understand.

After the test
Tell them it’s important to understand the tasks they couldn’t do, and then improve the site. Explain them how it was designed to work, because you can find more conclusions there.  They must know their feedback is important.

Get all the conclusions and write a report of changes that should be done to the prototype, and, if possible, test again.

Hello folks.

I just uploaded the final version of a HTML prototype of our site. Please notice that it was not coded by humans, so it works in a slower pace than good code. But comparing it with the site I mocked up, you can really see the power of Justinmind Prototyper.

You can see it live here.

If you want to understand how it was done, just Download Justinmind’s site prototype and open it with our fantastic wireframe tool.

Just created a few snapshots of Justinmind Prototyper 2.6, and upped them to Flickr. This is the album. The project I was working on was our site wireframe recreation.

The great and unique comparison between all wireframe and prototyping tools.

Remember the wireframes of Justinmind’s site?

I’ve transformed (well, half-transformed) them into a prototype. Look at it live here.

The first 10 pages are almost identical to the real site (well, some things are more to the right, others to the left, and I must fine tune some events, but it’s a pretty good job for 2 hours of prototyping after lunch, isn’t it?

If you’ve been following our wireframing marathon, you saw we have plenty of wireframed pages. Indeed, we have Justinmind’s site all wireframed. Here are the pics.

But now, for something other wireframing software cannot do: click here to see Justinmind’s Wireframe Site. The main navigation links work, and the structure is all there.

This afternoon, I’ll start inserting the images and colors, to make it really look like our site, and republish it.

What do you think about it?

These are some screens of the wireframes of Justinmind’s actual site. I’m drawing them and plan to animate them today. Later, I’ll post the prototype.

You can see more wireframes in our flickr album:

The first one is a mockup. It has the design, color, images, etc. The second is the wireframe.

This is the homepage of our site, fyi. The wireframe was made with Prototyper, of course.