The indicators are clear, but are a little misplaced.The 2hours Timer label and Orientation label, should be in the top of the user interactions elements)
The modern fan
Modern and atrative design;
Mapping very confusions;
Icons meaning aren’t all clear;
The on/off buttons aren’t Highlighted with visual relevance;
The labels of the hours, we do not know are related to which buttons;
Obviously we have to evolve more and we must be careful to keep things simple and especially to ensure that users do not have to memorize the instructions to use the equipment. Usable intuitively and with obvious affordances.
Today when I was trying to access my online bank and I came across a very unpleasant situation and extremely unfriendly.Despite being a satisfied customer with the bank in this case, they let me very frustrated.
Here’s what happened: In the course of an account unblocking request, once you have entered the required data you have reached the final part to “accept” the access conditions. I clicked the checkbox and nothing happened … I could not tell if it was active or not. (another problem).I thought it was strange but I thought it was a browser problem … So I tried on IE, Chrome and Firefox and nothing has changed.
I had to do call the helpline … I called and I was surprised with what they told me … Do you see the red link, more prominently … So I had to click first, and then “read” the conditions, and then close the window and yes after that, the checkbox appeared Active.
Oh … I had to take 4 actions to continue the action. I complain the usability issue to the person who answered me. I also decided to share this “huge bug” of usability and leave here a solution, which maybe with luck, someone is kind enough to correct.
Errors: – Many steps to follow up on an action; – There is no indication, nor message to the user that should do a series of actions; – The checkbox drawing does not indicate that is inative;
– Create a tooltip or other type of message object to indicate what to do; – When entering this page should have the text of the conditions soon and of course the user had to “read” and go to the bottom of the page where you have the buttons to accept.(See Google example);
– Or Finally, but not the best, in the text thta already exists, indicate what should be done;
In the end I click in the “Ajuda” button, that means “help” in Portuguese …
But without success, the message says: “User Help” There is no help for this page. Close Help.
What did I learn today? Today I analyze some mockups to a new platform. This time i didn’t do the design, just had the opportunity to review the desktop version and mobile version. It was fun to see the other side of the design process, in which essentially try to find defects and flaws in the proposals of others. Always as a constructively critical perspective, I realized quickly from failures in the design of the composition is that there were concerns in the area to take into consideration to put the buttons.
A very simple analysis, I came across these errors:
– Do not over do the amount of buttons, in this case we had six buttons, an area that was too small. Resolution: Eliminate some buttons, reducing to the maximum. Create a button on one of them includes more features. As the share button.
After clicking in the android share button, we can try open a screen like that:
After clicking in the IOS share button, we can try open a screen like that:
– Leave space between multiple points and lists, once again, to not click on the wrong button.
– Placement of elements “stop scrollers” that give the feeling to the user that is no more information on the page. Solution: Add some indication that there is more information (eg: titles)
– When designing for mobile, we need to sometimes give priority to some information that will appear only in the mobile version.
Can be the the case of the footer: When the footer have a lots of information, such as multiple menus, icons and text blocks, you need to reduce the material in Mobile. We have to define that are most relevant to the mobile version. See example below. In this case the mobile proposal reduces the information, used only one menu block and the link to the social network. In short, choose content that the user can use on his device.
After choosing the ideia, the following is a the list of features that app will have. We have to know that more features y have the app, more tests will be needed and more setbacks and arrangements will be needed to do.
In this case, for this app you have the following features:
– Possibility to choose a date of departure and arrival (days that you have to travel);
– Possibility to choose the value of the your budget to travel;
– With these parameters the app will search all the flights that fit the profile fitted;
– The results are displayed in ascending order (from the cheapest to most expensive);
– Ability to mark as favorite some flights. (if at the time the research was unable to decide / arrange the trip);
– Ability to display the destination city on the map;
– Possibility to see more information about the city, across the map;
– Ability to schedule the flight, going directly from app to app or website of flights agency or company (easyjet, Momondo, edreams, Ryanair, etc …);
Having established these features, you need to make a draft of the workflow.
It is a scheme, a storyboard sequences of screens, with the indication of how the app works.
This is a outline of how the app would work.
After and before moving on to the computer, I like to draw by hand, the sketch of what I have in mind. Quickly with the pencil or the pen, I can lay out my ideas
The phase that follows is the simplest UI design of App screens. In my case i drew in Balsamiq Mockups, that could quickly lay out and plan all screens of the app.
Despite being almost black and white, with some appoitments of color, at this stage we can already notice what will works and what does not. At this stage it helps to structure the workflow and also helps us to build visually
the app itself. We have already at this stage have a perspective of what works in terms of size and positioning of buttons and usability. I can also understand if some elements are to little, or are in the right location or is missing visual elements to create a good user experience.
In this phase we can also do tests to people that are external to the project. The best way is to export all screens, and make a prototype in the various apps available in the market such as POP, Marvel or inVision.
Last weekend I had the opportunity to attend a workshop UX / UI Design for Mobile app. In renowned digital school in Lisbon.
It was really great, get to know the methodologies and best practices to design a mobile app. Because drawing an app for mobile is very different to a designing a website.
Over the next days, I will share with you some of that knowledge I have acquired and share to the exercise that I did.
Some points to remember:
– The idea is critical and we need to know the concept and who will be the audience for the app;
– Do mockups on paper. Yes, despite to seem a little old school, it is important to organize the ideas and have a basis for designing to digital;
– Make digital mockups:
and test … test over and over till is perfect;