When did this?become the representation of an App drawer / Menu icon?
As much as I complain about it, that icon has become synonymous with the Menu Icon as more and more?products start to incorporate it into their designs. Apparently anything that is popularised by Facebook will?become scripture in the bible of web design.
My question for the discussion is to determine how does a design element become as popular as the ‘hamburger’ icon, ?especially when an icon of this sort is not rooted in the physical world, like the trash can icon or the clipboard icon.
The discussion led from what is ‘convention’ and also what to do when introducing new concepts that are not?conventional (yet).
Do we just blindly follow who can communicate this new ‘convention’ to the general public?
What would be the drawbacks of this? Would this be considered lazy design?
There was some discussion on how industry giants could greatly influence the convention of?how the design or interactivity should be. However, we should be very cautious of this as Facebook has since?changed what the ‘hamburger’ menu represents after a ton of testing showed the contrary believe of what the icon represented.
Facebook has since switched to a tab bar icon where the ‘hamburger’ icon is not used to obscure more frequently used app functionality.
Clever Design, even better functionality
No matter the design, functionality of it should be tantamount.
Take for example the “Slide to Unlock”. Before the release of the 2007 iPhone, I don’t recall?there ever being an interaction pattern like either in the digital, or real world.
Today, it is common to see touch screen phones to have a swiping action to unlock the phones, but which do you think makes?more sense to the user?
iOS Slide to Unlock
Android Lock Screen
The iOS feature not only has clear text instructions on how to use the feature, but also has a marquee animation which clues the user on how to interact with it.
The Android version has none of it. It’s just a static screen with no animation or instructions.?Now you may think that this made the iPhone’s “slide to unlock” the clear champion of usability,?thus making it the convention, but do remember that they still had to release these tutorial style?videos on how to actually use it.
You might say that I’m rather defensive from straying from conventional design when it comes specifically with User Interfaces.
My team complains that the designs I prefer the following conventional designs concepts such as,
- Location of Navigation should be up top, hidden menus on smaller screens should be on the left side
- Links should have an underline. Hover actions if there would be.
- Large Buttons or CTAs for anythign that performs an action.
- Checkboxes for multiselects and Radio buttons for single options.
- Try not to use Icons only.
But there are times where we want to branch out, we want to be ‘special’ and we think of some real novel way of implementing an interaction point for the user. It would be easy to check out other competitor designs for the same functionality, but because of our rather unique customer base in SEA, we are all close neighbours however we could not be more different in our culturally and?understanding of certain concepts, this may not hold true.
We began the discussion and had many great pointers on how we could safely introduce new UI concepts to your users.
1. 1st interaction is most important
The first time your user interacts with a new feature is the most important. This is not about user on-boarding / tours, this is about?from a pure usage standpoint. The moment you click or touch that icon, you should immediately see the effect or get feedback on what it does.?Here, speed is important, the feedback must be close to instant as the users really need to be able to know understand the relation?between the action vs the results. Lower their recall that they have to make, help them remember the cause and effect.
2. Allow for Undos
“Treat them like Old people! Old people are scared with technology as it seems like every thing that they do seems to make the computer explode.”
Allow users?to undo their actions. This gives them the confidence to explore around your product. They can do anything they want, try out?everything without fear because they can always go back or undo their previous action.
3. It should be usable in the first place
Think of the purpose of that interaction. Is the interaction even required? Do the user need to click twice when they only needed one??Each interaction must have a usable purpose. Think about why they need it, and above all else, can they do without it?
4. If possible, allow for a fallback UI
Is the new UI too experimental? If you aren’t sure if your users understand it, provide for another way that they can accomplish their goals.
One?example is the Float Label Pattern.
When it comes to input form fills, we use placeholders in order to guide the user what they need to input into each input fields,?however the moment they focus on the input fields, the placeholders disappear, thus forcing the user to recall what it was there before.
The Float Label pattern will continue to show the user the context even after they start typing, thus reducing recall.
5. Don’t use them all at once
Don’t use all these patterns at once as it will seem to you that you are very defensive with your designs. You have no confidence in both your users?and also the clarity of your designs. Just like any good article, ensure that the point you want to get across is clear enough and not heavily worded.
Background on why I asked this question
My products span across multiple southeast asian countries and our understanding of my customers are that they have?incredibly diverse backgrounds, cultures and education levels. Whenever we decide upon the design and interactivity?of a new feature, I would always like my team to ‘play it safe’ and to err on the side of caution when introducing
new or novel icons, gestures or information delivery that were -stolen- inspired by another product.
Why do we use Icons? Why not text? Why not both? Different languages translate awfully from English. The length?of simple word in English can be very long in Vietnamese or Thai. It will simply not fit into most of our designs?which always start in English.