Going Unusable

Skipping all that you don’t say part I feel like this morning is the morning to explain some basic things I’ve repeated plenty of times for years.

There are two reasons to do it. First I am tired to explain the same thing, and having a post I can send it, thus promoting my blog. Second is I have a couple of live examples of Usability being not the same to Awesome User Experience. Third reason (of those two) is that I am in a mood to write something beautiful today.

Where did that usability come from

Ages ago (back in 1998) I was a young web designer doing local projects. I had to explain every client why it was unacceptable to write vivid green letters on a vivid red background, why the links had to be underlined and why all other things that make site easy to use were a must. The clients, though, had their own ideas on how everything should have looked and functioned, usually contradicting common sense and technology level.

Well, at least that never changes ;)

By means of JavaScript, later newborn CSS, tables and mother wit the sites were created.

So to explain in one word what the perfect site should be I didn’t use fancy but usable. That’s why I preferred to do mass media sites or complex portals, rather than something like wedding dresses shop site.

Well, I was wrong

Not in that part where I don’t want to do a site about wedding dresses. But in the part where I claim sites have to be usable. To be precise, I wasn’t right back that days, but I would be wrong now, deciding to create site that is just usable. It’s standard set of rules nowadays.

Usability → User Experience

It happened about 2005 or 2006, when web soaked into our veins and occupied a portion of the brain. I will not be surprised if future studies find out that there is a part of the brain responsible for everything related to internet stuff. People got totally used to websites, and with iPhone in hand one could visit any site or service one wants.

To get more people and customers everyone started working on unique or good UX. User’s experience of using your product should be somehow distinctive. That’s it, no secrets. That doesn’t mean unusable or may be does. Up to you.

Finally! Samples!

Those who use Facebook, please raise your hands. You, two, are you shy to raise a hand, or what? All those who think Facebook is hard to work with or use, please keep your hands raised. Good to see those two raised their hands as well.

Yes, Facebook is unusable. Yes, it provides tons of irrelevant information, let alone ads. Yes, Facebook changes the options and controls very often, forcing users to search for them in all the menus and submenus. That is done on purpose.

I’ve read a blogpost of some Facebook employee and then, when in Bay Area, met a guy who worked on Facebook UI (well, part of some part of it) and he told me absolutely the same. Facebook has a good usable design. It is so beautiful your eyes will start bleeding rainbows. It is so usable, you won’t see that irrelevant posts that make you mad, and have all the information on the tips of your fingers. There is a Facebook that can make you happy.

And studies show it would dramatically decrease your time on the website.

Why would you be there and like posts you’d never like to see if you got the information needed with no clicks or scrolling? Who would read and click all those ads, if the photo from your yesterday party wearing turkey on your head is right in front of your eyes? Who would chat in browser if the site is opened and closed for a minutes, not tens of minutes? At the end of the day, how are you supposed to procrastinate if you get only relevant and up to date content? Go read Medium for that!

So we’re sentenced to blame Zukerberg for unusable interface, while he is more interested in providing us catchy user experience, that ties us to Facebook, forcing to scroll miles of feeds.

Now the second story. It’s actually about the latest version of my website: genn.org. I’ve updated my portfolio. I also reorganised it. Instead of putting several parts of the project to different categories, I grouped everything by projects. As since 1998 I made a lot of interesting things I prefer to post selected, favourited design solutions.

Like naming, identity, design and website design for ill&mates. That’s a big and long project. In past that could be objects to put in logo, website, graphical design, business cards categories.

Or like calendar for UNICEF. It’s just calendar and this is one project. Just graphical or print design category. That’s it.

Or like naming, identity, promo materials and packaging for Honey Bunny. Objects to put in logo, branding, identity, packaging, maskot, naming. But all of them are in one project.

Now I am waiting for the huge software project to become public, to post it as a project, not a couple of screenshots. I have dribbbbbbble and Behance to post fragments of my work.

If I’d want to show just logos or infographics, I’d made sections and list of works. But I want every attendee of my portfolio to be absorbed by the things I made. Like in modern art gallery, please, take your time, enjoy the colours, thoughts, combinations and communication. There is a link between you and the thing you are looking for. Value that moment.

That’s the Awesome User Experience I designed and it works. For those impatient there is Behance. Quite usable, nah?

I was going to finish here but remembered the story proving I was right about that Awesome UX.

Proof

One of the headhunters called me to ask: “Excuse me, I wonder if you have like another portfolio?” I didn’t understand what she wanted and why she didn’t like mine. It’s not that bad, really.

“The one with something less creative.” — asked the lady.

I sent her link to my Behance saying my portfolio is me, while on Behance I just popularise what I do. If someone gets interested in me I’d prefer him or her to be interested in my way of thinking etc.

Long story short, later she called me to say none of her clients wanted to see Behance while some of them loved the portfolio on genn.org. Because of the Awesome UX, I assume.

t.A.T.u. The Retrospective

It was 2003 and thanks to my friend Slava I was highly influenced by David Carson, who was like in superflous opposition to perfect minimal vector shapes of Scandinavian design. The funny thing I was inspired by different photos of skies, concrete and industrial constuctions, pseudo-technical vector trash etc. I tried not to look at David Carson’s works so I couldn’t steal an element. I looked through The End of Print, closed it and never opened again until the project was finished.

I listened to t.A.T.u. but found out they don’t help much, so I started to listen the songs reversed (yes, backwards, so Friend or Foe was like Foe or Friend) and that helped to graze the corners and lines.

I used like thousands of grunge brushes, most of them made by myself. I studied tens of techniques to deteriorate the photos. I combined default fonts as text with decorated text saved as images. Don’t forget that was 2003 and coding wasn’t like nowadays. It was more like puzzle, where you don’t have PNG with alpha-channel, advanced CSS or normal JavaScript. I kept that in mind while drawing every element of the design.

Today I found this lo-res picture of the design and no signs of the sources. I messaged my friends I worked with back then in hope they were more responsible than I was and had backups. It seems to me they don’t, but while writing this post I remembered about one DVD at parents home that may help me. Anyway, the worse it looks the more David Carson it is.

Check the full t.A.T.u. website design in ‘Work’ and appreciate on Behance.

Thus the Icon Was Born

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.

Place

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.

Settings and Start live streaming states of the application

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).

Sign Language

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.

Android Material Design Trash icon on the left and GoPro Trash icon on the right

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 Design Create 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 for Settings 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.

Top icons are Material Design default and bottom icons are custom sketches

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've got the power!

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.

No time to explain! Tap!

The one and only illustration of iOS 7 GUI in this post

Morning glory and despair. In the next couple of days we will not just get bored with #iOS7 but also annoyed by #iOS7bored. I don’t want to discuss certain icons (hey, Safari!) or hipster colored gradients — that will be discussed in millions of comments on thousand of blogs. There is nothing interesting in discussing the visual of new iOS 7. The main idea about it is you will not want to lick the icons any more. Not even once (they are too sharp now).

Got sick? Stay at home!

We’ve changed — I hope that’s constant — Ukrainian social ad two years ago. How could we do that? We did that creating really good social ad that would be the ad outdoor agencies would fight to place on their billboards pro bono — that means free. Why was I silent for two years? I could find right words to describe the huge amount of work done. Now when I found them I was happy to write share the knowledge.

iPhone 4 designer's edition for sale

Please excuse the photo quality because it was taken with some Android HTC phone first generation iPhone

As you may know I’ve broken the glass on my iPhone 4 16Gb that was bought in Great Britain and was never locked. After that it was replaced with brand new front glass and I broke the back glass. So the back part of my iPhone now looks pretty much like decorated with stained glass and doesn’t cut the user because it’s very cool glass that looks quite stylish. As the glass was broken by me one can be sure it is designer’s edition of iPhone. As opposed to other designers I’ll sell my edition much cheaper than iPhone 4 costs here in Kiev (even if you decide to replace the back glass the final price would be still lower than used iPhone). You are welcome to contact me on this matter.

And if you still vague if the back glass is so important here is a story for you I wrote this winter. Thanks to it you would be as sure as I am that iPhone is not just about the back glass but more about user experience and being and iPhone.

Google? Fefefe!

Part of google.com screenshot with almost seamless but existing video background colour difference

As it’s John Lennon’s birthday today (actually Google failed even on that, announcing Lennon’s birthday on 8th of October), Google made a perfect animated logo dedicated to it. Check it on google.com in not so obvious way — you have to click the logo you’ve never clicked before and never new it was active. But Google is always Google — nothing can be done really perfect. Was it really so hard to make the background of video the same as the background of the whole page? Pay more attention to details already, you’re not beta startup for years!

For all those, who think that it’s the YouTube’s way of creating problems I want to remind that YouTube is Google’s. So even if the owner of the service can’t make the service stop ruining videos, what should ordinary users do?

Waking Up

I caught one post in the sea of the drafts I have here. There are 10s of them. Anyway, I’ve chosen one and publish it today because this morning twitter is overfilled with messages like “I want to sleep”. I don’t have a problem waking up with a smile (I don’t use don’t use alarms, imagine that ;). Anyway I sometimes think it’s wrong to get up early. But let’s get back to the topic. Below is the remastered version of text comics I’ve sent to bo one morning.

Leave Me Alone. And It's not About New iPhone 4

Screenshot of Pepelsbey's isgeolocationpartofhtml5.com with Geolocation turned off

I want new iPhone! I waaant it! But this post is not about iPhone 4. It’s about life and fear. Let me begin with classical joke I came up with to explain what I think about socialization of networks and networking of society:

So that guys enters the pub and barmen gives him Cosmo. — Wtf?! I want pint of Guinness! Barmen hands him HTC Legend with twitter on it where it’s twitted “I like to entar bars and drink Cosmo (@pub 4sq.com…)”. Guy greens: — Bloody hell! Took my girlfriend’s iPhone.

Dull tables, hard infographics

Let’s make the top two of ways people love to organize information. First, for sure, is throwing all data in trash can and forgetting about it. The second is tables. People love tables! They love tables so much that Apple was nothing without spreadsheets software. Apple hired Bill Gates and his Microsoft to make that soft and he was happy to get inspired by Mac OS.

Anyway, let’s get back to the tables. I know a lot of office workers who even write texts in Excel — they find that way of information organization quite comfortable. So once again people love tables. It’s a pity that love doesn’t mean “can do good”. I met too much tables in my life but fell in love with only two of them. Other tables look like informational prison where data has to sit in it’s personal cell jailed.

Infinite Real Life Calendar

7 pages (one for each day of the week) that turn around reflecting how fascinating the life is. The best present for the office worker.

Mask so flu won't recognize you

Flu masks. Full collection available at armour.genn.org

You have to change your flu mask every 2 or 3 hours or it will hold the bacteria party. Stylish flu masks (you can buy them) are the best for protection. The official soundtrack is ♫ California Dreamin’.

Update: You can buy flu masks here

What's wrong in getting up early

It may sound weird but I don’t need so much time to sleep. Plus that, I wake up in perfect mood almost every morning. Sometimes, after my eyes open themselves and smile shines the face, I remember of being sick, deadlines or a little quarrel with my girlfriend. That shades the mood a bit but doesn’t prevent from deciding to start a glorious day and fix all the inconveniences.

(Russian) Another Monica

(Russian) Boas Lisboa

(Russian) Rufus Wainwright is so autumn

(Russian) Odnoklassniki

(Russian) Чтение

(Russian) Как я провел лето

(Russian) Ничего себе

(Russian) Яблочный Киев