Low fidelity prototyping: The cheapest corrections in design stage ever!

Agenda:

1. Prototyping – what is it?

2. The design process.

3. Showing the project to client before developers will write any line of code.

4. Changes in project? Sooner equals better.

5. Examples of tools for prototyping.

1. Prototyping – what is it?

First of all I will describe what exactly prototyping is. It is a group of techniques used to present in a short time a graphical concept of project. It is (or at least should be) used at the beginning of the design process. There are a few kinds of prototyping:

FREE role-guided training plans

Get 12 cybersecurity training plans — one for each of the most common roles requested by employers.

Download Now

• Low fidelity prototyping – the fastest, easiest and cheapest one. It may be a sketch on a piece of paper (paper prototyping) or a picture made by an application.

http://nhungcathytu.files.wordpress.com/2012/05/3rd-low-fidelity-prototype_page_11.jpg?w=788

http://teced.com/wp-content/uploads/2011/05/Low-fidelity-wireframe.jpg

Examples of low fidelity prototyping

• Medium fidelity prototyping – this one is more complex, containing colors and more precise positioning of components. This is a slower (and more expensive) method than low fidelity.

http://bang13.com/wordpress/wp-content/uploads/2011/06/CreativeLIVE-Med-Fi-Instructor.png

Example of medium fidelity prototype

• High fidelity prototyping – Not significantly different from the final design. Executing this type of prototyping is most time consuming and most expensive but it best representing the final product. It may be made by software like Photoshop.

http://www.benjaminkoh.com/images/nPerson_review_large.jpg

Example of high fidelity prototype.

2. Design process

When we want to implement prototyping in our design process, we should place it at the beginning of whole work. Let me avoid such things as marketing and budget issues, resources management, competition analysis, etc.

[workflow made by me]

This workflow is to the moment before developers starting their work. First of all the concept of workflow/userflow of project should be designed. Each window and each functionality should be put into this flow.

The next step is the Initial Design Concept, but we can at once go to the Prototyping step. It is a low fidelity one. After sketching screens, our prototype should be tested by users. The best situation would be if the prototype has been tested by end users. Unfortunately this possibility is rather not often.

It's also important that the test group is quite broad and diverse, but about testing prototypes by user I could write a second article. Please remember about this iterative process (prototyping – users testing). After few iterations our prototype will be for sure better and more adapted to users. After it we have a final concept which is evaluated and that's how we make a final design (high fidelity mockup / prototype).

The above process is only a general example and it may be applied in many varieties. An important part is the user testing. The faster we execute tests, the cheaper will be the modifications.

3. Showing the project to client before developers will write any line of code.

In this chapter I would like to present you more technical details about capabilities of prototypes. In the first chapter you learned that there are 3 main types of prototypes, depending on fidelity level.

Now let's imagine that in over a dozen hours of work you can show your client in an easy and compact way, how the software will behave in different situations, moreover – client will see it on the computer in very interactive way.

And that's the main and greatest feature of even low fidelity prototypes – they can be INTERACTIVE.

The client clicks on the dropdown and he sees all options on the list. He clicks on one of menu options and he sees a different screen loaded. All without writing any line of code!

Nowadays there are lot tools for prototyping, which offer interaction between mockups. Depending on the tool, we can add only hyperlinks to GUI elements which move us to another screen, but we can also select an event like an OnClick, OnMouseEnter, or OnKeyUp and more complex events and actions.

There are lots of pros: Developers will finally know what you want and how an app should behave, clients give you fast and real feedback.

Tools for prototyping often offer more possibilities: exporting interactive prototype to clickable PDF or HTML (clients don't have to have the same tool to open it), commenting current version, versioning, support for all operation systems and devices types (mobile phones, tablets etc), and rich collection of UI elements in library… the list is really long and all of these things significantly facilitate our work.

But the biggest benefit from this is just saving cash, which is what the next chapter is about.

4. Changes in project? Sooner equals better.

Try to imagine this situation: In a late stage of project development, the client realized that in the registration form there should be two more fields. From his point of view, the change is trivial, fast and for sure low costing.

But the Project Manager of your project already has a terrible headache. He knows that two fields more mean rebuilding a data base, a lot of changes in the source code and maybe small redesigning in the GUI. And it means one more week of work. What about the deadline, what about additional costs…?

This kind of situations can be easily avoided. When the client gets the interactive prototype, he can try to register, and there is a huge chance that he will notice the lack of two fields earlier. The possibility of clicking and trying is priceless in this case. Now all you should do is just create two rectangles and choose an action for these elements. About 5 minutes of one person's work. Not a week of half the team's work. Do you see the difference?

In this way we can save lot of money and lot of time, because the change is usually more than one.

When the development phase is free of amendments, the time required to finish the project is shorter than ever!

5. Examples of tools for prototyping.

Here is the short presentation of some online tools for prototyping which offer different functionality for different amount of cash.

In most of these tools we can in an easy way sketch not only a GUI but information architecture and the Business Logic of our project.

• Jumpchart (www.jumpchart.com)

Jumpchart is a very functional tool, which can facilitate work in the first phase. It allows much more than only prototyping.

Its most important functions are:

- Planning of architecture information: In aneasy way we can build even very complicated information architecture. Jumpchart dynamically creates a menu preview, which we can put on our prototype site and export all to HTML/CSS with our own styles in order to present all stuff to the client in an attractive form.



Easy content management: All materials contained on site can be gathered in one place. Each change is saved, thanks to it we can go back to any moment and for example compare it with the current form. There is also a possibility to use RSS and e-mail to see exactly who and when made changes in project. We can export everything to the most popular publishing platform – WordPress (but this feature is only available in the paid version).

 

- Wireframe View – Preview and designing is without diffusing images and colors. In a clear way we can show all workflow in the project.

- Easy cooperating with a client: All mockups can be edited not only by team members but also accepted (or not) by a client.

- Snippets: When we use the same part of content in many places in the project, we can create a Snippet with it. Each change will be seen everywhere.

• Mockflow (www.mockflow.com)

Mockflow is very similar to a different tool – Balsamiq Mockups – which is very popular in my company. I used it in SharePoint prototyping. In my opinion, this one is more stable than Balsamiq (online version), contains fewer bugs (Balsamiq for example didn't refresh thumbnails of projects after many changes) and it works faster. It also contains interesting icons that can give a more deliberate look of the interface and at the same time retain its simplicity. Mockflow cooperates well with mobile devices. Because of technology (HTML5 + CSS) it does not require any plugins, for that we can easily use it on tablets and mobile phones.

Most interesting functions:

UX Addon Services – access to many useful materials about creative web pages, usability etc.

Exporting project to HTML5 – possibility to see the whole interactive project without having a Mockflow software

Inserting grids for better placement of UI elements in project (i.e. 960 grid)

Converting site map to Excel

 

• Pidoco (www.pidoco.com)

One of the most popular prototyping tools in USA. Its biggest pros are:

• Rich base of UI elements to insert
• Two different styles of mockups: sketched and plain
• Easy importing images and videos to project
• Creating a template and using it in the future
• Possibility of checking what was edited and by whom – ease of management of the project by the larger team
• Usability testing – possibility to see live how the user is moving through the prototype, VoIP live, recording the test and comparing it with the next session. These tests can be carried out remotely.
• Exporting prototype to DOC, PDF, HTML and SVG (vector)
• Creating and testing on mobile devices (mainly iOS) – a set of predefined tools, running prototype for tests on mobile device
• API Integration – easy embedding the links in other apps, integration of prototyping with developers' processes using API keys

• Creately (www.creately.com)

Its most interesting functions are:

Importing images from Google Images and IconFinder.com (and from its own library) – it's not necessary to enter external webpages to search and copy images into project

    Embedding interactive mockups on web pages, blogs and wikis

    Integration with Google Apps – access to Creately from Gmail, Google Docs and Google Calendar

    Cooperating with FogBugz – adding diagrams in order to easier presenting of bugs and features to developer – great simplification of cooperation between QA and Dev.

There is an interesting variety of Creately versions:

On-line version

Desktop version

As FogBugz plugin

As Confluence plugin

As Jira plugin

  

• ForeUI (www.foreui.com)

ForeUI is a very good tool that goes beyond prototyping. We have a possibility of choosing many embedded styles (like in images above: hand drawn, wireframe, winxp, mac, win7).

We are also deciding about behavior of app thanks to creating a flowchart. Thanks to it we can create in a short time a very precise mockup, which shows exactly how the final app has to look. Options of interactions are much more expanded – we can decide about many things – much more than only linking UI elements. At the end we can export everything to HTML5 receiving a fully functional prototype.

 

Here is the link to the example site that is a prototype made in ForeUI:

http://www.foreui.com/demos/Fwitter/

Most important features:

- Switching between few styles (hand drawn, wireframe, winxp, max, win7)

- Easy but powerful configuration of interaction in prototype

- HTML5 Export

- Creating templates

- Creating sitemap for easier navigation management

- Multi-platform support (Win, Mac, Linux, Sun)

• Hotgloo (www.hotgloo.com)

HotGloo is suitable both for small and large projects. It allows to insert ready-made modules (eg Login) instead of submitting them from single elements. Each UI element has many configuration options (type of interaction). There is also the opportunity to work on a project by a few people at the same time (online) and easy collaboration with customers (for example a customer can add a note with a comment in each place of a prototype). There's also a possibility of using project templates.

 

Video showing HotGloo capabilities is here:

http://vimeo.com/27524830#

Turorials: http://vimeo.com/channels/hotgloo

Most important features:

- Ready to insert modules

- Many types of interaction elements

- Easy cooperation with members of the project and clients

- Project templates

- Keyboard shortcut for ease of work

- Easy versioning of project

- Fast switching between edit and review views

• Justproto (www.justproto.com)

The only Polish tool in this juxtaposition which has quite good functionality.

It offers easy collaboration with others through chat.

 

We have a choice of hundreds of UI elements, as well as mobile, grouped in a clear way. Each element is highly customizable.

We have also a very good file manager:

Components help make a change in the project. If you change something in one place – it changes everywhere.

Prototypes are fully interactive, which gives them greater density:

Here are examples of prototypes made by JustProto: http://www.justproto.com/pl/examples/

What should you learn next?

From SOC Analyst to Secure Coder to Security Manager — our team of experts has 12 free training plans to help you hit your goals. Get your free copy now.

Get Your Plan

Besides of these tools, there is a whole bunch of others with similar functionality. Here are some of them:

• https://gomockingbird.com/
• http://flairbuilder.com
• http://my.origramy.com/
• http://www.protoshare.com
• http://www.lumzy.com