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.

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!

Here is another fun fact about Chuck Norris: that was him who bited Apple logo. No, this one is really real not just real like previous ones. Long story short. Chuck Norris got offended by that fact that his application for iPhone had awfull sales and blamed — you’ll never guess — Apple usability for that. Apple App Store should be sorry for that some useless iphone run-and-gun app doesn’t sell. Chuck terrorised Apple Inc. that he’ll move to Android platform from iPhone (did anyone care about that?) and rejected design changes Apple proposed. So Chuck Norris created his own design for App Store and Apple used his idea to change the App Store interface. Know what? Chuck was much better counting to infinity and travelling to Mars then as UX specialist.

So what’s wrong?

The slight and not critical change was changing the grid and elements placement. Now they look like they were fitted not placed with ease and lotsa space around them like it was before. You can’t recognize where is information you need from the first sight. You have to search for it and even (can you believe that?) click more and more! Users say that they were delighted by how obvious the App Store was. Now it isn’t ;)

That’s how application page looked like before Chuck invasion (the image was found using Google Images)

That’s how application page looks now, after Chuck brought pain to usability

That leads us to the main problem of App Store as a part of iTunes Store redesign — elements got inconsistent. I wrote a post about GUI elements consistency, so I’ll just remind that every user interface element that does any function must look the way that best represents that it does that function. E.g. button looks like button andlinks are blue and/or underlined. And sure you don’t have to do a bunch of buttons styles — that would confuse users. Also don’t make not buttons look like buttons — that would confuse even more.

They don’t have it now in App Store. Here are the few examples:

—

Can you tell which one is progress bar and which one is scroll? They look the same! The same like progress bar does

Ok, here is a hint:

Still inobvious anyway

I thought that applications block was loading for the first times until accidentally clicked there. Even Google with awful scrollbars in Wave was better.

—

The next one is much harder. Can you spot all the links in text block below?

Except blue links (that are obvious and clear) “Report a Concern ›” and “Yes | No” are the links. The other black bold text isn’t a link. Don’t ask me why

By the way the blue color is also used for captions that are not a links.

—

Breadcrumbs on top changed too.

They look more like links to websites (highlighted after the app description) not like the breadcrumbs Apple uses all over the site and used to use in App Store

While breadcrumbs on the bottom of the page remained ok

—

Buy button looks like some kind of dropdown and tab vicious relations offsrping.

If the app is free then there is nothing to do about it — no “download” or “buy” just statement of fact

—

To summon the unusable interface monster they also added awfull wet floor effect to rating stars that now look like overdecorated something but make it hard to read the info they should represent.

Wet floor effect is less aggressive and more readable when rating

Is everything wrong?

No gamma became lighter and it makes it easier to read text (but that wasn’t hard earlier) though it made iTunes Store look just like site opened in iTunes not like the part of application.

Fact

Chuck Norris isn’t good as UX expert. Apple ruins interface for unobvious reason.

I made a pretty business card for photographer with QR code on one side. It sounds like a good joke that you have to take pic of his card if you want him to contact you to take yours. I just feel like I don’t want to right anything more, so I illustrated how it works if you have card, cell phone and app that recognizes QR codes on that phone:

Just because I try to be honest every time it is possible (two or three times a year ;)) I want to confess that QR code on illustration doesn’t represent contact information while it just contents known mem

I use QR app on my iPhone to recognize QR codes. It helped me a bit on Sziget ;) You can practice in recognizing codes using any QR codes in this post. Here is one more with my contacts:

Other unusual cards

• Bo card
• Real manager’s card