Do you use Mapping?

Mapping-03

Mapping?

Through mapping, the basic understanding of a product is communicated within the first micro seconds of use. Mapping in product design, uses spatial correspondence between the layout of the controls and the devices being controlled, it is easy to determine how to use them.

Why do I need to care about mapping?

As designers, we want to minimize the hurdles that people come across when using our products, as if they hit too many hurdles they will drop out of the race altogether frustrated and tired. To keep people using your product and achieving their goal, we need to make this process as simple as possible. Mapping is one core pillar of this process in design. With extra thought at this stage, extra levels of communication such as labels or directions will not be needed saving time and expense. Good design is a communication method in it’s own right, so written signs or directions will clutter up the design and more importantly the mind of the user.

How about some examples?

 fig. 1 Is a simple example of  great mapping of a stovetop. The control nobs clearly relate to the position of the burners. The conceptual model the user has in mind, makes logical sense with the position of the burners and the controls.

fig.1 – Good Mapping of a stovetop Mapping - Hob from above-02

 

 fig. 2 This mapping leads to a great deal more confusion. The users conceptual model of the relationship between the control nobs and the burners can have many different patterns in mind, as shown in fig.3

fig.2 – Poor Physical Mapping  of a stovetopMapping - Hob from above bad Mapping -02-02

 fig. 3 This diagram shows the different options available to a user when confronted with a poorly mapped stove top. This simple confusion can potentially lead to a life and death situation, if incorrect burners are left on.

fig.3 – User Flow Hierarchies

Mapping in the Digital World

So you may be thinking, “how does all of this talk about ovens, gas and nobs help my website?” Well the methods from the examples above are just as relevant when applied to the digital. Whether you’re an app or web designer, mapping must be considered in your designs. Always make sure that the conceptual model is clearly communicated to avoid users presuming a different model.

I don’t want to be a bad mapping designer!

So how to we stop giving our users exploding with frustration? There are a few ways in which to improve the quality of your mapping and improve the overall design;

1. Avoid Hierarchies

Abstract hierarchies are difficult to communicate as they are based on the conceptual model of the designer. In other words, how the designer thinks the user would navigate the mapping may be completely different to that of the designer. Keep mapping designs as close to the actual function as possible.

2. User test and make adjustments

Like all things UX, test test test. Trialling a design with users will give an accurate feel for how people will navigate the functions. If the users assumptions vary from that of the designer, then the design needs to be changed.

 

Why should you be doing User-Centered Design?

In the past decade, an awareness has grown for User-centered design (UCD). Whilst many agencies implement a UCD process, many still work on an antiquated system. So why are these forward thinking firms using this system?

 

1. High Quality Results

With users being the sole focus for this design process, the final product will fit them like a glove. User satisfaction will be greater, clients will see lower bounce rates and customers will stay happy.

2. Avoiding Scope Creep

Scope creep will kill projects stone dead. Designers will loose patience and miss out financially whilst clients will be frustrated by the lack of meeting of unrealistic expectations. Through a UCD process, challenges within the project will be highlighted early on, allowing designers and clients to talk about hurdles before committing to extra scope.

3.Users expect an easy to use product

The minor hold ups when trying to perform a simple task can quickly grow into frustration and eventually users will stop breathing as they pass out from being so blue faced. Maybe an extreme case… but users will stop using a website should they find the task at hand too frustrating. UCD greatly increases the chances of users completing their goals leading to happier customers and of course, happier clients.

4. Ass-umption Free

” To assume, makes an ‘ass’ of ‘u’ and ‘me”

A great deal of web design work is based on opinions & assumptions about how people use their sites. The most commonly heard assumption is that people using mobile phones are on the move or would only need half the content ( this is not true ). UCD is built on testing, and the review of quantitative and qualitative data; more of a science than a guess. Fact based design allows a project to be adjusted logically, improving stakeholder relationships and increasing ones reputation as a designer.

5. Research opens your eyes

99% of the time, research will provide hidden surprises that might not only improve the design, but focus the client’s business on areas that may of been overlooked before. The analysis can highlight competitive advantages keeping client’s interest in the project high.

 

Google+ (plus) Logo Icon Vector and Adobe Illustrator file

Eventually, the Google+ logo falls out of the factory.

I’m also putting together some packs for social networking design, such as banners and DP locations and templates.

If you have any other logo suggestions, or would like something specific, drop me an email.

I will soon be uploading a file that contains all the icons too! After which, I will start work on the actual logos for each of them.

Here is the Google+ Plus Logo (icon) all ready and useable for Adobe Illustrator. Use it as you wish and play with it as much as you like! It is CS3 upward compatible. If you would like it in another format just leave a comment and I’ll upload it, or drop me an email mr@jonbennallick.co.uk.

NOTE: The PNG at the top of the page is in 150dpi and has a transparent background so it can be used on super large  formats if needs be.

You can download the illustrator file below, use it how you wish.


[DISPLAY_ACURAX_ICONS]

I try to keep my site online, but she get’s expensive ( all of these people seem to like my stuff) , if you would like to support me, then please feel free to Donate through Paypal below. :)





LinkedIn Logo Icon Vector and Adobe Illustrator file

And now a LinkedIn Logo Icon too!

Beavering away at the Google+ Logo Icon, I’m also putting together some packs for social networking design, such as banners and DP locations and templates.

If you have any other logo suggestions, or would like something specific, drop me an email.

I will soon be uploading a file that contains all the icons too! After which, I will start work on the actual logos for each of them.

Here is the LinkedIn Logo (icon) all ready and useable for Adobe Illustrator. Use it as you wish and play with it as much as you like! It is CS3 upward compatible. If you would like it in another format just leave a comment and I’ll upload it, or drop me an email mr@jonbennallick.co.uk.

NOTE: The PNG at the top of the page is in 150dpi and has a transparent background so it can be used on super large  formats if needs be.

You can download the illustrator file below, use it how you wish.


[DISPLAY_ACURAX_ICONS]

I try to keep my site online, but she get’s expensive ( all of these people seem to like my stuff) , if you would like to support me, then please feel free to Donate through Paypal below. :)





Amazon Kindle Template Vector and Adobe Illustrator file


So a late evening later, we get the Amazon Kindle template. It was one of the most fun Vectors I’ve created so far, and I’m pretty pleased with how it turned out! I’m working on the keyboardless model now, and I’ll upload that over the next couple of days.

So this template is NOT FOR PROFIT, it’s for those wishing to test out the look of a Kindle book design, or a front cover, book layout, etc.

But apart from that, get creative and spread the vector love!

Here is Amazon Kindle Template (this is the keyboard model) all ready and useable for Adobe Illustrator. Use it as you wish and play with it as much as you like! It is CS3 upward compatible. If you would like it in another format just leave a comment and I’ll upload it, or drop me an email mr@jonbennallick.co.uk.

NOTE: The PNG at the top of the page is in 150dpi and has a transparent background so it can be used on super large  formats if needs be.

You can download the illustrator file below, use it how you wish.

[DISPLAY_ACURAX_ICONS]

YouTube Logo Icon Vector and Adobe Illustrator file

A YouTube icon!

After a long break for summer, I’m back with some more Social Networking Icons for you!

Got a YouTube Icon here, free to use, and free to edit! Only Google+ to go now.

If you have any other logo suggestions, or would like something specific, drop me an email.

I will soon be uploading a file that contains all the icons too! After which, I will start work on the actual logos for each of them.

Here is the YouTube Logo (icon) all ready and useable for Adobe Illustrator. Use it as you wish and play with it as much as you like! It is CS3 upward compatible. If you would like it in another format just leave a comment and I’ll upload it, or drop me an email mr@jonbennallick.co.uk.

NOTE: The PNG at the top of the page is in 150dpi and has a transparent background so it can be used on super large  formats if needs be.

You can download the illustrator file below, use it how you wish.

[DISPLAY_ACURAX_ICONS]

I try to keep my site online, but she get’s expensive ( all of these people seem to like my stuff) , if you would like to support me, then please feel free to Donate through Paypal below. :)





Twitter Logo Icon Vector and Adobe Illustrator file

It’s been too long!

After a long break for summer, I’m back with some more Social Networking Icons for you!

Knocked up this Twitter Icon and I’m currently working on a “YouTube” and “Google +” logo.

I will soon be uploading a file that contains all the icons too! After which, I will start work on the actual logos for each of them.

Here is the Twitter Logo (icon) all ready and useable for Adobe Illustrator. Use it as you wish and play with it as much as you like! It is CS3 upward compatible. If you would like it in another format just leave a comment and I’ll upload it, or drop me an email mr@jonbennallick.co.uk.

NOTE: The PNG at the top of the page is in 150dpi and has a transparent background so it can be used on super large  formats if needs be.

You can download the illustrator file below, use it how you wish.

[DISPLAY_ACURAX_ICONS]

I try to keep my site online, but she get’s expensive ( all of these people seem to like my stuff) , if you would like to support me, then please feel free to Donate through Paypal below. :)





Pinterest Logo Icon Vector and Adobe Illustrator file

Another month passed!

Hey, another logo for your use now. Got the Pinterest icon all up and ready.

Here is the Pinterest Logo (icon) all ready and useable for Adobe Illustrator. Use it as you wish and play with it as much as you like! It is CS3 upward compatible. If you would like it in another format just leave a comment and I’ll upload it, or drop me an email mr@jonbennallick.co.uk.

NOTE: The PNG at the top of the page is in 150dpi and has a transparent background so it can be used on super large  formats if needs be.

You can download the illustrator file below, use it how you wish.

[DISPLAY_ACURAX_ICONS]

I try to keep my site online, but she get’s expensive ( all of these people seem to like my stuff) , if you would like to support me, then please feel free to Donate through Paypal below. :)





Facebook Logo Icon Vector and Adobe Illustrator file

Hey all of you out there!

Hey, another logo for your use now. Got the Facebook icon all up and ready.

Here is the Facebook Logo (icon) all ready and useable for Adobe Illustrator. Use it as you wish and play with it as much as you like! It is CS3 upward compatible. If you would like it in another format just leave a comment and I’ll upload it, or drop me an email mr@jonbennallick.co.uk.

NOTE: The PNG at the top of the page is in 150dpi and has a transparent background so it can be used on super large  formats if needs be.

 

You can download the illustrator file below, use it how you wish.#

[DISPLAY_ACURAX_ICONS]

I try to keep my site online, but she get’s expensive ( all of these people seem to like my stuff) , if you would like to support me, then please feel free to Donate through Paypal below. :)





Spotify Logo Icon Vector and Adobe Illustrator file

 Good evening all!

Finding an Adobe Illustrator file of the Spotify Logo was proving difficult so I decided to make my own.

NOTE: The PNG at the top of the page is in 150dpi and has a transparent background so it can be used on super large  formats if needs be.

 

You can download the illustrator file below, use it how you wish.

[DISPLAY_ACURAX_ICONS]

I try to keep my site online, but she get’s expensive ( all of these people seem to like my stuff) , if you would like to support me, then please feel free to Donate through Paypal below. :)





 

 

If you want any different versions or something similar email me mr@jonbennallick.co.uk