Safari decided this morning is the morning to stop communicating with me. That was the reason I launched Google Chrome and decided to make it my default browser. As usually I clicked Chrome › Preferences… in menu bar and was surprised nothing happened. I clicked that path again — nothing! The reason was Google Chrome stopped opening settings window because it opens settings in separate tab right where you browse the sites.

Yet again Google created something unusable with awful UX. They do it every time so precise I even start thinking they have a special department that specializes on bad UX. Apple made their HIG specially for such clumsy developers and listed there all aspects of creating forms, buttons etc. Thanks to that relative unification Mac OS X users experience relief when working with Mac OS X applications. Even Opera that made Opera browser slightly wide of the HIG didn’t ruin preferences UX much.

Settings

That is how Preferences windows Looks in Safari and about every application in Mac OS X

And this is how Preferences look in Google Chrome

Unusual Chrome mess may seem usable to one but that one might never experienced Mac OS X and didn’t get used to its apps interfaces and Preferences windows. This Chrom settings tab looks alien and unusual. Pay attention to the text fields that are way too long and resize with window resize.

Instead of separating setting in different tabs in dependence of their functionality as it is done in other browsers

almost all settings in Chrome are collected under mysterious ‘Under the Hood’ section and look like mixed this and that.

Appearance

Comparing with Safari’s Preferences window and system wide pop-up (sample texts font changes with selection in pop-up)

Chrome’s realization doesn’t look so good. When one clicks button to change a font size he gets a layer that overlays other settings and looks like that (I had to change its height because there were about 500-600 pixels of plain white space at the bottom)

Search

Google is the search monster. Google tries to use search everywhere it is possible and in a couple of places it is impossible. Even the most unusable I ever met History in Chrome is based on search. Noticing Search option in settings tab I thought that it would finally prove me that there is something good in all that preferences change. Naїve me! Let’s skip the part that if your application’s settings need search field then your application is either Microsoft Word, or is too complicated. Instead of using simple and sweet mechanism of highlighting search results in Preferences windows

Google made their awkward unusable move.

While the search is not syntactic but semantic there is still not much use of it when highlights block GUI elements and descriptions especially.

***

Google Chrome has autoupdate feature on and no way to turn it off. That is the reason I got this update of functionality and visual part without even prompt or warning. This is the invisible part of UX that matters.

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.

Yet another story about every detail that matters

It’s cold in here, must be winter — paraphrasing pick up joke. I wear gloves already because I like wearing them and I don’t like to have cold hands. This morning I was in a hurry going down the street and listening music using default headphones attached to my iPhone 4. In a rush I was in I felt an overwhelming need yo know what time it was. As I wear no watches because I have clock in a phone the first impulse was to take the phone out of the pocket, slow down and look at it. Not the sort of things you do in a rush. Almost not thinking about what I was doing I just squeezed mic on default headphones wire to turn on voice dial and yelled angrily: ‘What time is it?’ in Russian Realizing what I was doing while asking the phone I expected ‘i don’t understand what you are asking better luck next time’ tone but was surprised to hear ‘The time is ten hours twenty four minutes’. The reply was in Russian too. Know what? That just brightened my morning!

I don’t know if other phones have this option but know I expect my phone to answer any question I have. I’ll start with: What’s the answer to the question of life the universe and everything?

***

I am not joking, my iPhone 4 is for sale. Please email or leave a comment below. Thank you ;)

Not so long ago me and my fellow antique, travel and glamour photographer from Minsk started a project called Walkyrie. Time passed by and here we are with helveticized vintage photo number 100. One-wow-hundred. It’s not just some kind of milestone or a reason to have some champagne but also some kind of a birthday.

As we are going to print the catalogue of walkyries in the nearest future but not today and we wanted with all two of our hearts to do something special to celebrate we’re 100 walkyries high, we decided to create the thing we’ve never saw before — ebook stuffed with artistic material like any printed design or art catalogue. The format chosen was ePub. You can read it with reader on your mobile device or computer. There are two versions of album (every is about 15 Mbytes): Walkyrie × 100 which should work with any and every reader and the iBooks special edition Walkyrie × 100 Interactive. You can always find links to both versions on walkyrie.org. I recommend to download interactive version if you’re using iBooks on your iPhone, iPod or iPad. Here is a tip how to add ePub to iBooks from Apple. And while the file is downloading let me tell you how it was creating the interactive art catalogue.

Why so interactive?

The idea of creating interactive ePub that can be viewed with default applications on idevices captured my mind long ago but I didn’t pay much attention to it. One day Ameagari asked in his twitter if anyone saw an interactive ePub. I didn’t and didn’t find any true interactiveness on the web. So I made one now ;)

It wasn’t so easy

My friend got a special t-shirt from NYC with lettering ‘fuck rude people, fuck subways, fuck rain, fuck high prices…’ and so on. I can make such t-shirt after creating and testing Walkyrie × 100 Interactive for iBooks. The words except ‘fuck’ would be ‘webkit’, ‘z-index’, ‘font-family’, ‘jquery, ‘iBooks’ etc. I’ll tell you why.

The interactivity of our artistic album is in the ways you browse it and get information. You can use it as an ordinary ebook but you can also click the circle (SVG image to look good on every screen resolution) and get a walkyrie fortune — random of 100 pages with pictures. It’s like fortune cookie.

Another interactive future is the ability to see the transcript if you can’t read it on the image.

Both things are nothing special but we didn’t want any more. May be in the next version ;)

Interactiveness doesn’t work almost anywhere except iBooks and even iBooks are not so good with it. You have almost no control on font choice, size and text align. You can’t control z-index (overlapping of elements) without tricks. You can’t control items layout some times (I had to use bloody tables, back to 2002). You can’t control if items will fit one page or more. The known bug is that sometimes, when one is leafing the catalogue backwards in iBooks on iPhone and then one does it the normal way blank pages may appear but not on the regular basis. Remember the t-shirt?

Tips

I think some of my beloved readers and you, the pretty girl from Korea, who googled this page, will find the following information interesting. There would be just lines of technical info so everyone not interested can skip to the next chapter.

Any ePub file is the zipped collection of some stuff and .xhtml’s with CSS, Javascript and other stuff you need on the pages like images. I made ePubs using Sigil for two reasons. First is it has perfect name that suits my needs and magic. Second is it works and has version for Mac OS X. Also it’s opensource if that matters for you. The shortened structure of the book in unusable and hard to edit tree view (hello, opensource) is below.

To work with elements I used jQuery. To react to touches I used this code:

1. $('#transcript').bind('touchstart', function(e){
2. …
3. });

To hack the issue with z-index (iBooks just acts if it was Internet Explorer 3 to it) I had to call webkit for help:

1. var tra=$('.help').height()+30;
2. $('.help').css('-webkit-transform','translateY(-'+tra+'px)');

That’s all nothing more interesting there. I think everyone interested is capable with embeddin SVG image with all that Midxmidymaxymidy ;)

Read don’t interact

All the readers I tested on touch devices aren’t capable with interactivity you can provide in book. They don’t expect you to interact with the book as they have to provide you interaction with the application. So when you have an interactive area on any page of you ebook and user taps it it’s quite not obvious if he expects it to interact (as he may be not used to interactivity and know nothing about it) or just wants application to show menu or some information. While iBooks handled everything not bad I had to remove showing the tip when you tap the photo and create the separate link. The reason is in the tests: I myself accidentally tapped the photo when I wanted to flip the page and though I was touching just the right side of the screen. And as you can control almost nothing the creating of interactive ux is quite a challenge. Also iBooks doesn’t provide any back/forward navigation so if you even clicked a link in an ordinary book to see the notes there is no simple way to get back to reading.

Anyway!

Get our walkyries on your device and enjoy having them with you. You can always impress you friends, colleagues or have something to look it while eating pizza.

As it is and art object our walkyries catalogue is notable on every bookshelf even if it’s virtual!

***

This is the second ebook challenge for me in last week and a half that was made not much longer then previous. Something is in the air.

I didn’t post to blog like for ages. Now I am back, at least I hope that my drafts won’t grow mouldy and I’ll finish them. What’s the best way to tell your brain to start working? Make something interesting and resource-intensive. So we (me and akella) did it — 24 hours project. It took us 33 hours to finish. When it was 26th hour we started to notice that it takes more than two dozens of hours, on the hour 30 we understood that we are a bit late. Anyway, we finished and one of us went to have some meal and another started writing the blog post, fell asleep right in front of his display and pushed a ‘Publish’ button just now ;)

Project Idea

The idea is sweet and neat — to give the ability to read books on iPhone without installation of any additional software. I loved this idea because I love simple and interesting things and akella was fond of it because he couldn’t install any application on his locked to AT&T iPhone which was hardware unlocked. As the process doesn’t include the installation from AppStore or Cydia we should create HTML-application. I forgot the correct name Apple calls them.

Project Design

The first groundwork was made almost half a year ago and it was something like iBooks we can see now. As I joined the process I came up with idea of ‘separate book — separate icon’ and separate application. So the library is stored online and you can use any book you want even downloading it for offline use. Besides using the trendy idea of storing everything you don’t need somewhere and the things you need on your device this approach makes reading book really about reading — nothing redundant, just you and the book. The negative side was that it wasn’t very convenient for storing more than two or three books. We accepted it once more understanding that all books are stored online and ready to be downloaded. The folders in iOS 4 proved we were not so wrong and up to dozen books now can be organized in one nice icon.

The whole application and its work can be separated on two phases. Phase 1: choosing or creating book to read and adding it to iPhone Home Screen. Phase 2: Reading the book even if the iPhone isn’t connected to the internet.

Supported formats so far are .html and .fb2 but we are working on compatibility with others.

Project GUI

Pictures finally ;) You could check the live version and compare it with the sketches but now it’s down. We’ll resume it shortly!

Everything started with application icon in different sizes because I had a hope that there is a way to make different apple touch icons for different devices. There isn’t.

The first thing user sees starting the project site is the interface to find a book in catalog and browse it or to create the book of existing .html or .fb2 file. Search results and catalogue of all books look almost the same but catalogue provides the ability to filter books by genre.

Then we moved to the screen sketches. After the user have chosen the book it starts loading. User can start reading it already. When it’s loaded the hint describing how to save the book appears. The arrow shaped background points right on the plus icon in the bottom toolbar of iOS Safari.

After the book is added to Home Screen, book icon appears there. This is the end of Phase 1.

Next time user taps the icon he sees the loading screen (takes couple of seconds to load a normal book on iPhone 4 and a bit longer on iPhone 3GS). And after the book is loaded user can read it. It automatically remembers last read place and scrolls to it.

That’s it. So easy, so cool!

There is a special version (differs a bit now) for those, who didn’t use iPhone, iPod Touch or iPad to access the site.

Fun Facts

• The GUI is 100% made in vector graphics editor
• All icons and our logos are used on site/in application in vector using SVG
• All graphical elements, except icons and arrow shaped background, are 100% CSS. Yes! These gradients, shadows and backgrounds are not pictures!
• Apple Touch Icon in iOS 4.0 looks crappy and blurry and there is no way to fix it except updating to iOS 4.1
• All fonts used are default in iPhones, iPods and iPads
• Thanks to all that stuff application looks the same on iPhone, iPhone 3G, iPhone 3GS, iPhone 4 and iPod Touches. We are waiting for the iPad test results ;)

How everything looks on iPhone 4 (bigger) and iPhone screens. Almost the same ;)

Oh, as to the backstage, there were lotsa things one of them is different ideas about organizing the book download process:

tl;dr

Surf to project site (will be resumed shortly) with your iDevice to save books right to your Home Screen and read them later. No additional software needed. Formats supported are .html and .fb2. We luv ya!

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.

Where is Waldo?

I read about something like that when I was ten in utopias and anti utopias. Big Brother was watching us and we hated that. Now it’s not fiction, it’s real. New Safari 5 supports Geolocation. Now sites can determine where you are with not bad precision. And it’s in HTML 5 features therefore it is in or will be in Chrome, Opera, Firefox and others. Sure browser asks if you would allow it to determine your location but who didn’t press Enter quickly to access the website needed?

I didn’t take a look at Geolocation API but I’m sure we’ll see headlines like this in nearest feature: “12 000 torrent users were jailed by RIAA for downloading new Daft Punk album. Know what? It’s brilliant!” By the way Safari couldn’t determine where I was neither with geolocation turned on, nor off ;)

On the other side I can forbid geolocation and get rid of the local Russian and Ukrainian versions of Google, Reddit, YouTube and other sites who are happy to stab their localization efforts right in my face. And that’s not the only advantage of geolocation. Let’s take Foursquare for example. It helped Ankl a lot when he couldn’t find parking lot in new city. But I’m nervous. It looks like we’re looking at the dragon hatching out and I’m not sure it’s up to us to train it.

Hey, phone producing companies, place screen and buttons on one side of the cell phone and dynamic on the other. Is that so hard? Every year when summer starts to heat the plastic or glass phone screen starts to stick to your ear or cheek. While it’s just uncomfortable with regular cell phones it makes touch screen phones (like iPhone and its brothers from other producers) unusable. You have to wipe the screen so it could feel you touch it again. Placing the dynamic on the other side of the phone solves that!

Update

Now iHave iPhone 4 and see my iDeas iS useless at least for it. Both surfaces on both sides are glass, but this glass doesn’t stick to your cheek and is not so much affected by sweat. So either you mess with placing screen on the other side, either you make normal glass that doesn’t stick.

Today was the day to buy cider and meet bear in the grass. Real cider and toy bear. Couple of weeks was the time to draw a logo with “anime like fox” and company name. As to me my drawing suits Firefox loving mac-nazi t-shirt more, but logo consumer was happy. And I was and am happy. Leave you to taste cider.

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.

Why so serious introduction?

When we started making Invest Gazeta design the one who was in charge told that the main goal is to make site feel like you’re reading magazine but not making it look like magazine. We had to use different infographics elements in articles to make them look more magazine-like. Besides histograms, graphs and that awful pie charts I had to decorate tables and make them look joli. We discussed several ways and stopped on the most simple yet elegant way. That’s how I met sparklines.

What’s sparklines?

To get the most exact definition head to Wikipedia (I read it writing the post for the first time). My definition is sparklines — little charts right in table or in-line text that expand information presented by data but they are not as informative, as detailed charts. E.g. if we decided to show unicorn meat price then we can put graph next to the numbers to show that it raised during last couple of month:

How can I make usable sparklines?

To make sparklines usable and useful first decide if you need any and what data you want to decorate. Then decide what type of graph you want to use. Examples are shown in illustrations below. But first I want to discuss visualization of graphs as sparklines. A lot of useful advises are given by Edward Tufte (he is the author of the term sparkline) in his Sparklines: theory and practice. I like this article because I read it when I was finishing making sparklines for Invest Gazeta and found out that almost all solutions I came up with equal to Edward’s.

There are two columns with sparklines in this table: Last known temperature and How likely air smells. I used progress bar to illustrate how likely air smells because people are used to progress bar and percentage nowadays.

The temperature dynamics and adorable temperature range are shown in temperature column. Thanks to sparklines we not just present the last temperature but also show how it changed and how likely the season was for people. Marvelous! Units are show next to data because it’s easier to read not big tables that way.

I want to set your eyes on Term column. Instead of using two columns for first and last month in season I combined them into one thus improving readability of the table.

Sparklines in this table were used to show homeworks missed thanks to each of the games and to show overall result.

Homeworks missed are represented quite good thanks to sparklines. If we compare the shown sparkline with others we can conclude that it’s not intelligence boost but just switching to another games.

Overall results column represent fails and wins so viewer can see the progress. As we can see, player learned nothing — if he was unskilled in one game, he remained unskilled and won from time to time ;)

And once again I minimized the number of columns showing game publisher next to game title.

I had most fun with this table asking friends and trying to remember things you usually forget.

Let’s start with the last column Music volume after 21 average doses. Data is in decibels and each bar represents volume after certain average dose. It’s the same graph as in first example but it’s made more like equalizer bars and divided on 21 parts. If we could make roll over on that, that would give us even more information on volume on every dose.

The amount of bottles friends drank during 2005-2009 is represented in corresponding column. We use red dots to indicate and make more readable start and end of the sparkline and also color code numbers to see if the ending number is bigger, less or the same as starting. To make sparkline look more appealing I added background gradients that I couldn’t use in the first table because background there is used to represent range of temperatures.

***

Sparklines are often can be replacement of big and detailed graphs and charts. Sometimes sparklines are even more informative then miserable pie charts. E.g. Google Analytics and Flickr use sparklines to represent visitors statistics and even as sign of statistics (on Flickr).

Sparklines on Flickr (on top) and Google Analytics

Yesterday Steve Jobs shared his “Thoughts on Flash” with the whole internet audience. Some think it’s disaster and mutation of Apple into Big Brother. I, the one who’s personal site is 100% Flash and the who wrote a lot about Flash, disagree. The explanation of situation by Jobs is clear and perfect. He says that iPad and iPhone are too “weak” to run Flash — batteries will drain out, processors should be as hot as the son and everything on the screen will be stuck anyway. The explanation why H.264 video is less resource intensive then Flash video is just masterpiece of easy to perceive information. H.264 is decoded by special chip and Flash video is decoded by soft that needs a lot of resources (different chips ;)

When it was first time that I found out that my genn.org won’t be available on iPhone because it’s flash I became a little bit sad. But then, after thinking on that, I realized that there is not tools for “mouse over” events in touch interfaces. Furthermore, there are no such events while stylish menu on my site is based right on that feature. Steve Jobs told about that too but he forgot to put link to my site ;)

Adobe replies

I expected Adobe to not arguing but cooperating with Apple. Adobe made a bunch of cool tools that help generate interactive content using CS5 applications. I understand why Apple restrictions made them sad but I don’t get why they consider it’s a war declaration. As to me, they should discuss things with Apple and come up with one easy to use, produce and decode format for interactive medias. I intend it to be PDF! That would be perfect for Adobe which will certainly become the number one for publishers, perfect for Apple which’ll get more and more content for it’s iPad users and will be able to make new subscription services. They will film the process of creating interactive media together with Wired and everyone will be happy, but no…

Adobe CEO Shantanu Narayen decided to argue on every statement of Jobs “thoughts” in a way “we’re always right and Apple’s always wrong”.

I think it’s redundant to explain how Apple CEO differs from any other CEO. Steve jobs knows how to convince, explain and sell. Other companies has evangelists and public relations managers for that. I hope that they will start doing their work for Adobe-Apple conflict soon. I communicated with some of them and find Adobe experts and evangelists professionals. Based on that and based on the fact that Adobe is large corporation with cool products they just must start communicating with Apple to come up with elegant and wonderful idea about interactive media.

By the way, every Adobe expert and/or evangelist on Adobe CS5 presentation used Apple computers or notebooks. Markus Bledowski started explaining post production application on desktop PC with Windows 7 but then had to switch to his white two years old macbook as the interface of Windows looked unfamiliar to him. After that he replied all the time: Look! Adobe optimized everything so perfect even my little one works wonderful without dropping frames!