Week 3

Your Wireframes

Screen Shot 2017-03-11 at 8.38.49 PM

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?
planning screen the way you chose to group your fields together (departure and arrival time together and departure and arrival locations together) can be confusing. and may be unnatural place the departure time and lcoation together, along with arrival time and location together,
  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?
home settings is the OV information really necessary? remove it
results screen no information presented about total travel duration include infor about total travel time
  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?
settings tab The settings tab is on every page, but I only see the relevance on the first page, where the user inputs their data. perhaps integrate the settings into this page for a simpler design
all screens double settings tab and search tabs have only one search and settingss tab
  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?
results page you don’t have a search bar for the results page, limiting user control add a search bar for the results
  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?
all its unclear which page responds to which button along the bottom, and the user maybe be unclear as to where they are use feedback in the form of hover states to speak to your user and inform them of their actions
  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?
home travel no options for tailored actions allow users to favorite a route, so that they can quickly use the routes the use every day
  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?
every screen the main button on your bottom bar is misleading, does it lead to a metro functionality. or is it the logo of your app, as we do not see this used anywhere else we as the user don’t know what its for make it clearer and more independent
  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?
Travel results list the list with all the different results are quite small and may be difficult to read. This may especially be true with suer with a sight handicap and/or elderly users perhaps decrease the number of results per page and increase the size of each result
  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 screens no help tool visible provide a help tool
  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?

My expert review on a fellow student’s wireframes:

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 screen The placement of time selectors (using a switch) is confusing – can you only use one at a time? Users might get confused or forget they set a time in as it’s not visible. Place departure time and arrival time together instead of having only one visible at a time.
  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?
Home screen What will the maps display? It is unclear. Does it update live? Make it clear what the map does.
Results Screen Same thing about the map. Does it display location pins only after you select a route? Is it simply a map of a city until you click a route? Remove it.
  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?
All pages What is in the menu tab? As content is not shown, does it contain extra features? Add a page detailing the menu tab / or remove menu.
Results screen Background of icons is different color than the buttons. They look like they’re not part of the routes (they look like they do something separate). Fix row striping by making icons background same color as text background.
  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?
  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?
Results page and Route page No visual way of telling where the user is located at a certain time, so he might get lost in the app. Add breadcrumbs or other way of orientation.
  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?
home travel No way to save routes Allow users to save routes
  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?
every screen Although the map makes the app look consistent, it doesn’t help with efficiency. Removing the map on some pages may help.
  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 page The list of results is weird because of the row-striping. Changing the color on the icons for the row striping may aid with the simplicity.
  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 screens No help wizard available Provide help wizard
  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?

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

After receiving the expert review from my fellow class-mate, I started noting down the ideas that I found relevant in the expert review and thinking about ways to improve my low-fidelity prototype before starting to work for my high-fidelity one.

Some of my most relevant and useful insights were along the lines of positioning (changing stuff around so it makes more sense / is more efficient), adding a search bar on all pages (and deleting the conflicting search buttons), adding hover states (which I almost forgot about). Minor other tweaks were mentioned such as adding a favourite route function, lowering the number of results on screen so they’re more visible, making the main button less confusing (it was confusing because I forgot about hover states), or removing the OV info, although that feature I find necessary, as checking your balance is always helpful while on the go.

While most of the feedback I received was on point and helped me come up with ideas on improving my application, some of them didn’t make sense, therefore I did not keep in mind all of them, only the relevant ones to this project or the ones which were considered actual problems rather than just nitpicking. For example, “the user does not have any total travel time information”, but he has the starting and the arrival time.

Having someone else look over your work before moving on to the next step was crucial in the design process, as getting a fresh opinion on your work before continuing will guarantee if you’re on the right track, and if you’re not, it will tell exactly what is right in what field and what is wrong, and how to improve said thing. The middle button from the task bar is actually the Journey Planning page (the home page), that’s why it’s on the bottom navigation bar in the middle, not a “hidden metro functionality”, as it redirects the user back to the home page. Unlike the expert review says, the icon is not only used once – it is also used in the top bar next to plan journey.

Refined prototype:

Screen Shot 2017-04-11 at 10.17.02 AM.png

Changes made:

Departure / Arrival time are now placed together;

Double Search and Settings removed;

Hover states added;

Favourite route feature added;

Main button fixed;

List view made more clear;

Help wizard added;

Conclusion:

Having your prototype reviewed by a different person can help figure out the rights and wrongs in your design easily, as a fresh mind has a different, critical opinion on your design compared to your own opinion, and that can help you figure out parts of your design that wouldn’t stand out otherwise.

Having my product expert reviewed by a fellow student help figure out what I did wrong and aided me in coming up with solutions that will make my high-fidelity prototype more engaging and efficient.

Sources and Inspiration:

ns.nl, 9292.nl

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/