We in VideoGorillas are doing revolutionary app (as there are those who do something not revolutionary nowadays) that allows to stream live video right from your GoPro to the internet. It is called LIVE4 and the version I will be talking about is LIVE4 GoPro Android.
Even though it was hard to xml-ise and implement for the most Droids out there, I made the app according (and sometimes complementing) Google Material Design guidelines. This post is the story of one 24 by 24 dp icon in this design. You can check the current LIVE4 GoPro Android Material design in progress on my Behance.
It was decided that for the next release we are going to add GoPro controls to the application. So you won’t need to press something on camera except turning it on to work with it. All or the most settings you set on GoPro are going to be in the app. I added the item GoPro Camera Settings to Settings section of the app and thought of improving the UX. There in the app is a screen where you see preview of what your GoPro sees right now and where you can start your live broadcast. There is also the button to turn GoPro off — as the camera’s battery drains quite fast, we want users to have more time to stream. So the obvious place was to place GoPro Camera Settings shortcut icon next to the Power icon.
Tapping on both shortcut icon and GoPro Camera Settings list item should open the list of GoPro settings that looks pretty much like the Settings section.
But I didn’t know there is a problem that will carry me away while solving it. I had to replace that gray rectangles with icon (pictogram).
Before starting explaining how far I was carried I have to get off a subject to explain the strategies for working with icons in LIVE4 GoPro Android app. We will be back to GoPro settings shortly, don’t worry. As I am doing the Material Designed app, I try to use guidelines provided by Google, including icon guidelines, as much as possible. You know how mad I am about it from time to time, when there is the inconvinience in guidelines. So if there is no icon or metaphore for icon I need, I create it (draw) myself, based on visual language of Material Design. Seems pretty obvious and easy to plan, right? But we also have GoPro. And GoPro has it’s own visual language and icons. And GoPro users know that icons by heart, because most of the time the icon is the only thing they see on their GoPro camera screens.
No wonder Google icons and GoPro icons differ. Whenever it relates to general workflow that doesn’t affect GoPro, I use Material Design metaphored/styled icons. When it’s about interaction with GoPro I tend to use GoPro metaphors which are more obvious for users and highlight on subconsious layer that the user is doing something with GoPro.
At these pictures you can see bottom sheets. Left one is about deleting files on GoPro and the right is about choosing YouTube event or creating a new one. I used GoPro Trash icon for deleting files from GoPro SD Card, but I used default Material DesignCreate icon for Create a new event item. I also created a custom icon of the video file for Delete last file recorded which is based on generic Material Design recommendations for file icons and Video Mode icon used in GoPro.
Getting Back to GoPro Settings
As you can see, UI balances between two visual languages if we talk about icons.
So the first thing I thought of — let’s take the default GoPro Settings icon and use it. Actually, there is a couple of metaphores forSettings in GoPro Camera UI, but the wrench is more common as to me and is even used in manuals to represent setup or settings for a specific mode.
The good idea turned out to look not so good.
Okay, let’s try a different approach. We have a lot of icons for setting up different Android things. Let’s do something in Material Design visual language.
I loved the idea with this camera shape and arrows inside, but when done with GoPro shape it’s just gear inside the rectangle. So I outlined it and it started to look like brigthness setting icon. I also tried to put wrench inside the Material Design default circle — tough luck. But then I spotted the part of visual language I needed:
After a couple of tweaks (I had to decrease the radius of the cutout, so it won’t hide so much GoPro making it unrecognisable) and the icon was there.
But it still wasn’t the end. Testing on the live stream start state approved the icon doesn’t work good with the Power icon next to it. I even tested the other one, with outlined rectangle:
And thanks to outlined rectangle icon the thing I felt subconsciously became obvious: ‘Power’ icon has to be redrawn. It was made based on the icon on GoPro ‘Power’ button, but now it has to be based more on Material Design.
I’m tired writing so much. Here is the evolution of the ‘Power’ icon. Left is initial, right is final, every one of them was test on device to see which suites better. That did it! The perfect ‘GoPro Settings’ icon was created and it fit the UI like it was there from the very beginning.
And I didn’t even noticed before how much I didn’t like the previous ‘Power’ icon. It wasn’t bad, but this one is much better.
Originally posted in Mega:
Thus the Icon Was Born
We in VideoGorillas are doing revolutionary app (as there are those who do something not revolutionary nowadays) that…
Check Mega for more awesome blogposts!