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!

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

Adobe presented it’s new Creative Suite 5 in Kiev. I visited Adobe’s master classes for InDesign earlier, so I was eager to visit this one too. The presented material is fully covered by Creative Suites 5 descriptions on Adobe’s site so I’ll just say thanks to Markus Bledowski (Adobe evangelist) and Russell Viers and list youtube videos describing features I like most and post brief comments. Jokes and quotes are there at the bottom of the post!

Photoshop

Illustrator

InDesign

Post Production applications

I am not post production professional but thanks to Markus I was quite interested. First it was demonstrated to us how Adobe soft helped with Avatar. Then Markus has shown us how Adobe Premier Pro associates monologues from script with video using voice recognition (first useful use of technology, isn’t it?). After that he transcoded that video to DVD and Flash using Encore.

The final part was recreating a bit of famous Samsung 3D TV commercial using After Effects.

Markus made something rough but similar to the effects shown

All post production applications use the same cache on HDD so the data is updated automatically with every change if you work with the same file.

Interactive

Adobe goes on separating developers and coders in Flash more and more. Now there is Flash Catalyst so designers could design their interfaces without writing a line of code. And there is InDesign with new features for interactive medias that help to create interactive version of print magazine made in InDesign in just, dunno, and hour or two!

Now I see why Adobe was so angry with Apple’s deny to support flash and flash-generated applications on iPad. By the way, the generated swf is very intelligent — it stores all linked files in separate folder not in the swf file.

Wired uses Adobe Creative Suite to become more interactive. Though no way to use it on iPad

Dreamweaver was nothing interesting to me.

Interesting Facts

You can import 3d file to Photoshop, save it as psd and use it in other Adobe Applications as 3d model. It’s called Live Photoshop 3D.

Mini Bridge in all CS5 applications looks like enhanced open dialog. I think I’ll use it.

Adobe goes online more and more offering paid services. In InDesign CS5 you can publish your project right to acrobat.com and send link to it to everyone involved. They can leave comments viewing your work right there and you’ll get them right into InDesign GUI. Sounds like… fun?

Now you can name and change positions of art boards in Illustrator.

CS5 applications’ GUI and UX is more uniform now but there are flex-like GUI elements here or there especially in the “online” parts of interface.

Icons and splash screens have changed a lot and became more crazy (it’s not so hard to be more crazy then rectangle with a gradient, right?). Shawn Cheris told about the changes in two parts: one and two.

Jokes and Quotes

Russell Viers

— What’s your name?
— Volodymyr.
— Wha… Lah… Can I call you Bill?

I prompted adobe to place ad in dialogs with progress bars. That way they could earn money to make soft free for us.

Markus Bledowski

We don’t have problems — we have challenges!

Don’t ask if it’s possible. Ask how it’s possible.

Client comes and says he wants to recolor car in the video. Which color? He doesn’t know. Surprise me! Okay, that means pink. Then he asks the same color but different tone. That means green.

Roman Menyakin

While doing some complex task.
Roman: Adobe-kadabra!
Russel: Pow!

***

I’m quite sure my post doesn’t cover everything told on the master classes and presentation but Adobe doesn’t film or record in anyway its events and there no wifi so I could spam twitter with my emotions. Anyway, everything was quite interesting! And pen with notebook with Adobe’s logos are now living in my bag and magnet with I ♥ Adobe on it is laying sad — I don’t actually like them. So if anyone wants to have such stylish magnet on his or her fridge — just tell me.

I couldn’t make my IXUS picture it right, sorry. Here it is — the blurred magnet ;)

At last and not connected to the post topic I want to greet my friend Yura (akella). He’s 14 or 35 or something like that today!

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 found a link to stoplight concept of Damjan Stanković on dirty.ru. Designer offers to add sectors round the stop light so the drivers could see how soon they can move again and stop their engines thus saving gas and nature.

Damjan Stanković “Eko stoplight” concept

I like the idea and the contemplations but there are some problems with the product itself:

• the red light reduces — the less time left, the smaller the red light, the less chances you’ll notice it;
• uncertainty about the ending — the last sector is placed on the top, the stoplight are usually hung very high and the last sector is in the topmost position of the stoplight;
• different stoplights ave different time intervals, so we should vary the speed of the segments disappearing and that would confuse — people are concentrated on the road not on the patterns creation to understand stoplights, so this invention makes the simple object (as it has to be) more complicated;
• the old technology — LEDs are widely used nowadays to create stoplights instead of lamps behind colored glass as it is shown in the concept. LEDs are better because they are useful even when the sun is blinding. Furthermore it would be expensive to create such stoplights without LEDs.

Conveniet traffic light

See full size

We start with enlarged red light. It is useful and convenient because it’s the only one sign that orders us to stop and wait while others are more appeasable ;) We’ll use LEDs with no options and change the round shape to square. As far as I remember the stoplights are square in Minsk and even if I am wrong, I am sure I’m not the one who came up with the idea of using the whole available are. LEDs allow to do it instead of old technology with lamp and glass where the corners would be dark anyway. Time left would be displayed right on the square with light, so we won’t distract from the light but also won’t still the area of the signal.

Convenient font

I sketched a pixel font that would look good on the traffic light concept I suggest. It is also made that way that it takes the occupies the smallest area preserving readability (one of the suggestions is stealing one “pixel” from some of the numbers).

1 and 7 would never be mixed up. Also there is a way to show time intervals more then 99 seconds. If the interval is longer then we can show minutes turning to seconds the minute before the lights change. For the roads closed due to some cortege there is infinity sign showing how much those free riding care about us standing in the jam.

More features

As far as LEDs are used there are a lot of ways to inform and control drivers. Examples including cyrillic localization are shown below.

As they perfectly say: there are a lot of talks about invites and so little about Google Wave itself. I’ll help Google and talk about Google Wave. Sorry folks, I don’t have invites to send at looks like had none at all — no easy way to find out and not a word in the Help section. Oh, Google, you are so… so… arrrrgh! Just because it’s invite-only and not everyone can enjoy this, let’s be honest, pathetically cool but practically useless service, I’ll describe you why Google made its best to implement its unique philosophy on awful user experience in one more of its interfaces. Don’t get sad and bored, I’ll highlight just three most outrages GUI fails novelties ;)

Google Wave itself

Scrollbars

Yeah! That’s the thing I dislike most. They are glossy little things that scroll sometimes from top to bottom but sometimes in a certain area. First I thought that Google decided to make scrollbars like on DesignCharts but I was wrong. Scrollbar on DesignCharts is pretty usable comparing to GoogleWave scolldisaster. There is only scroll slider actually and no scroll bar. You can’t click slider background to slide on page up or down (the way I like to slide most). You can either click the arrows on the slider either drag it and then some dark thing on the background slides somewhere in the direction you pointed. The whole block scrolls too, but… it’s unobvious while working with it. You’ll get used to it, we even use Microsoft Powerpoint now but why not give user a perfect experience form the very beginning? UX! UX!

If you have a scroll wheel on you mouse, you can use it and it would help a lot, but I have Wacom and Mighty MouseM here and I had to get used to scrollbars.

Summary: it’s more about scroller on fancy flash website then about scroller in application. If you had to make a section in help about scrollbars (they had to) then these scrollbars don’t seem to be intuitive and user friendly.

Working with panels

While everyone moves forward, everyone knows about modal interfaces being wrong, Google makes its own way in implementing something unusable. I think that controls on panels tops are portents of Google OS GUI. And the model for this OS is must be Windows XP. Welcome to the future of interfaces, yep.

So we have minimize to top, maximize and close buttons. What do they do? Minimize to top minimizes to top near Google Wave logo — very unobvious (roll up is more expected) and I am sure users lose their minimized windows for the first times. Close button closes the panel. Maximize button makes that awful ‘fill whole 23″ of your display with this content’. Lucky I am — my browser windows are not maximized to fill the whole screen, so maximize is only about a browser window.

Process of closing windows varies a bit: sometimes you have × button to close the window and sometimes clicking outside it is the only choice.

Summary: if it’s prototype of Google OS GUI you’d better find a better role models then copying Windows XP inaccuracies.

Semantics

Though there are not a few inconveniences in the interface I’ll highlight just one more that shows how Google didn’t really care about UX. The text editing panel when you enter the text. First of all it’s placed not near the text you enter replacing the toolbar of the panel and the second — you can’t say what do some buttons do until you press them, which is bad.

Some of buttons show dropdowns and have arrow next to icon and some of them do the same but with no arrow. How should I find out before clicking?

Summary: compare two bars and you’ll notice the buttons on them look different. Not so consistent, ah? ;)

For the Google fans

Hello there. Thank you for reading. I know Google Wave is preview (being in beta is their style of living for ages) and I know they can do everything better. I don’t like Google itself lot but I adore Gmail (which actually thinks my emails are spam ;) and I waited for Waves as you were. What I do here is helping Google to make better UX. It almost turned out with Opera ;)

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

iTunes 8 and iTunes 9 on the right it’s alright ;)

Slightly changed GUI elements setting distance between Mac OS X and its’ competitors, who are in different ways get “inspired” looking at Mac OS X. I hope that iTunes 9 GUI design let’s us kinda spy through the keyhole and get info about how the next Mac OS X design would look like.

By the way, did you know how to turn the best mini player mode in iTunes? Use ⌘W keyboard shortcut. It just can’t be more minimalistic!