Week 4

Your Prototypes

Screen Shot 2017-04-12 at 5.09.34 AM.png

(clickable version here and at the bottom of the article)

Expert review on my wireframes (done by a fellow student)

Expert Review (done by Jeroen Nijkamp)

  1. Simple and natural dialogue

The design should have intentional and obvious paths, and should allow people to complete tasks quickly and freely. Using the product should feel natural to the user.

 

Screen or Component What is wrong? How to improve?
Current Route The placement of the plus on the side of the screen to show the stops in between can be misleading. Perhaps try to place them between the start and end stop

 

  1. Match the system with the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Screen or Component What is wrong? How to improve?
All The home screen icon is not a home, and can be misleading. It can make one think that its for metro exclusively. Make the home screen icon the Tripp3r Logo

 

  1. Make things efficient

A primary goal of experience design is to make things efficient for the human before making things efficient for the computer. Efficiency allows for productivity and reduced effort, and a streamlined design allows more to get done in the same amount of time.

 

Screen or Component What is wrong? How to improve?
Results page Users cannot see what the duration of their route is on the results page. this means they have to calculate it themselves Include the total duration of the trip so that users can see and sort by that,

 

  1. Make the user feel in control

The user should always feel in control and feel the freedom to use the system as he wishes to. Be forgiving when mistakes happen, and ensure that the user knows what caused the mistake and that he or she knows how to prevent it from occurring again.

 

Screen or Component What is wrong? How to improve?
Home Page should inform the user that the fields are required input, or at least which fields are required Include which input fields are required

  1. Provide feedback

Your interface should always speak to your user, when his/her actions are both right and wrong or misunderstood.

 

Screen or Component What is wrong? How to improve?
Home Page should inform the user that the fields are required input, or at least which fields are required Include which input fields are required

 

  1. Be flexible

Once a user has become experienced with your interface, reward him or her and take off the training wheels. The breakdown of complex tasks into simple steps that help the novice user will become inconvenient and distracting. Providing more abstract ways to accomplish tasks will allow your design to get out of the way. Allow users to tailor frequent actions.

 

Screen or Component What is wrong? How to improve?
na na na

  1. Be consistent and use standards

Your users need consistency. They need to know that once they learn to do something, they will be able to do it again. A consistent interface enables your users to have a better understanding of how things will work, increasing their efficiency. Users also need familiar standards that help them understand the system and feel at home. Follow platform conventions and standards (menus, buttons, interaction paradigms, etc.), especially with mobile devices.

 

Screen or Component What is wrong? How to improve?
Home The last fill in bar on the home screen is not rounded on the right corner, but all the rest are Make the Box Rounded on the right corner

 

  1. Use visual hierarchy and keep it simple

Design your interface in a way that allows the user to focus on what is most important. The size, color, and placement of each element work together, creating a clear path to understanding your interface. A clear hierarchy will go great lengths in reducing the appearance of complexity (even when the actions themselves are complex).

 

Screen or Component What is wrong? How to improve?
HOme There is no information provided on the top of the page for the home screen, yet that’s where important info should be Place important info on the top of the home page, or perhaps the logo

  1. Offer help

Help is not a replacement for bad design and even though it is better if the system can be used without documentation, it may be necessary to sometimes provide help and documentation. Tooltips and wizards are also considered help.

 

Screen or Component What is wrong? How to improve?
all except home A help functionlity is only provided on the home page Provide a help functionality to all pages

 

  1. Use emotion

Ease of use isn’t the only measure of a positive user experience; pleasurably is just as important. Something can be dead simple, but if it’s outrageously boring or cold it can feel harder to get through. Designs should have flourishes of warmth, kindness, whimsy, richness, seduction, with — anything that incites passion and makes the person feel engaged and energized.

 

Screen or Component What is wrong? How to improve?
All User colors to further help emphasize the company’s values: : moving quickly, respecting the environment (green color), keeping the customer satisfied (blue), being courageous and progressive (Yellow). add more color to the various elements. IE make the emissions number green. etc.

My expert review on a fellow student’s wireframes:

Expert review done for Jeroen Nijkamp

  1. Simple and natural dialogue

The design should have intentional and obvious paths, and should allow people to complete tasks quickly and freely. Using the product should feel natural to the user.

 

Screen or Component What is wrong? How to improve?
Home The placement of the back button (top right) is unusual. Consider placing it at the top left.

 

  1. Match the system with the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Screen or Component What is wrong? How to improve?
All screens The top right button group would be good if the items were related to eachother Group items differently

 

  1. Make things efficient

A primary goal of experience design is to make things efficient for the human before making things efficient for the computer. Efficiency allows for productivity and reduced effort, and a streamlined design allows more to get done in the same amount of time.

 

Screen or Component What is wrong? How to improve?
Home Users can not simply click plan after entering their location, they have to select a transport method. Clearly state what the defaults are.

 

  1. Make the user feel in control

The user should always feel in control and feel the freedom to use the system as he wishes to. Be forgiving when mistakes happen, and ensure that the user knows what caused the mistake and that he or she knows how to prevent it from occurring again.

 

Screen or Component What is wrong? How to improve?
Home Not enough feedback Add required symbols next to necessary fields.

  1. Provide feedback

Your interface should always speak to your user, when his/her actions are both right and wrong or misunderstood.

 

Screen or Component What is wrong? How to improve?
Home Not enough feedback Add required alerts and symbols next to necessary fields.

 

  1. Be flexible

Once a user has become experienced with your interface, reward him or her and take off the training wheels. The breakdown of complex tasks into simple steps that help the novice user will become inconvenient and distracting. Providing more abstract ways to accomplish tasks will allow your design to get out of the way. Allow users to tailor frequent actions.

 

Screen or Component What is wrong? How to improve?
na na na

  1. Be consistent and use standards

Your users need consistency. They need to know that once they learn to do something, they will be able to do it again. A consistent interface enables your users to have a better understanding of how things will work, increasing their efficiency. Users also need familiar standards that help them understand the system and feel at home. Follow platform conventions and standards (menus, buttons, interaction paradigms, etc.), especially with mobile devices.

 

Screen or Component What is wrong? How to improve?
Home The size of the map is never the same Try make map same size as results page

 

  1. Use visual hierarchy and keep it simple

Design your interface in a way that allows the user to focus on what is most important. The size, color, and placement of each element work together, creating a clear path to understanding your interface. A clear hierarchy will go great lengths in reducing the appearance of complexity (even when the actions themselves are complex).

 

Screen or Component What is wrong? How to improve?
Results Is the difference between the row striping the one extra transfer? Make clear the difference clear when using different colors at once.

  1. Offer help

Help is not a replacement for bad design and even though it is better if the system can be used without documentation, it may be necessary to sometimes provide help and documentation. Tooltips and wizards are also considered help.

 

Screen or Component What is wrong? How to improve?
na na na

 

  1. Use emotion

Ease of use isn’t the only measure of a positive user experience; pleasurably is just as important. Something can be dead simple, but if it’s outrageously boring or cold it can feel harder to get through. Designs should have flourishes of warmth, kindness, whimsy, richness, seduction, with — anything that incites passion and makes the person feel engaged and energized.

 

Screen or Component What is wrong? How to improve?
na na na

 

Reflective discussion on what kind of improvements you need to do based on the expert review:

Based on the feedback I received from my colleague, I have learned a couple of mistakes I kept committing throughout the prototyping process that apparently aren’t as minor as I had thought. For starters, the center “planning” icon seems to be confusing, so that has to be changed to the logo of the app to make the impression of a “home” screen. Adding a route duration and moving the intermediate stops sign (the plus sign) between the departure and arrival could also be design choices that I have neglected.

Consistency is hard to keep while also having to fill a set of requirements, but it certainly isn’t impossible. However, I learned essential steps in the process of high-fidelity prototyping, and more importantly, I have learned how to work with a style that is assigned to me instead of myself creating my own style.

Conclusion:

Doing high-fidelity prototyping helped gather knowledge about transforming low-key prototypes into a high-fidelity, click-able, almost real-like app and using it to further refine the final product.

Although my overall design has some errors (the biggest concern of mine being the fact that Arial Rounded MT Bold does not render properly in the preview, as I designed it in Sketch but prototyped it using Adobe XD, but it can be seen in the screenshot and in the source file), I am pretty content with my first high-fidelity prototype and I am expecting to get to work more with such projects soon.

Link to clickable prototype:

https://xd.adobe.com/embed/207d1148-cd1a-4df2-893d-b0809b223a05/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s