Redesign of mtv3.mobi

We just gave MTV3 Mobile website a redesign.

The recipe:

  • Simple and usable
  • MTV3 News look & feel
  • Easy access to sections, cross promoting services and sibling websites
  • As simple a design as possible: After contemplating how to differentiate between link types, we chose not to—Everything needs not to be conveyed to the user
  • Perfect partner: Besides coding, Conmio handeled the UI/UX while we concentrated on content and brand

Mobile specific website simplified to the max. UI/UX Design: Tommi Koirikivi, Conmio

 

Advertising Concept: Opening page

Display advertising displayed on top of regular layout such as rich media ads must subside in given amount of time. Squeezing elements into limited screen space results in crowded layouts. Banner ads are notorious for their poor performance. Good isn’t enough—Banner ads must be downright awesome for more than 1 per cent of the viewers to click on them.

Opening page concept in practice, Design by ad agency

In collaboration with our sales department I modified the concept of the ’Opening page’ for their product portfolio.

Demo page (check out the subtle CSS hover-effects)

If you can’t change it, make a feature of it

Journalists may see ads as necessary evil, but younger consumers usually feel more relaxed towards advertising. The are ad-literate, they realize commercials are out there to manipulate them—And They are OK with it. High end magazines realize this and have embraced advertising for years. Readers welcome Cosmo and Vogue for the ads as well as the stories.

Play with an open hand and present ads for what they are—commercial content. When user interface behaves as expected, nobody will mind.

Like button will give the campaign points, and winners are recognized with Best Pixels of the Month -award.

…but you still need the creative to run a successful campaign.

Don’t give in to the Dark side

Advertising is tricky. Everybody understands that advertising’s primary objective is to manipulate people’s behavior in to consuming products X and Y. However, people are ad-literate and manipulative behavior will quickly earn you a stigma. An interesting collection of User Interface designs to trick people are demonstrated among the Dark patterns. Don’t give in to the rage–Don’t go on to the Dark Side. Consumers do not care whether you will fill your quota or not, and anxious mindset will only earn you negative results.

Juuri Nyt: Design for a News Application

Juuri Nyt is a news application that brings core categories from our main site to mobile users. When user connects to a network she can download latest news on her mobile device (iOS, Nokia Symbian^3 touch, Nokia WP7), where they remain until she updates again.

Juuri Nyt

Application is built by Conmio. They have also built The International Herald Tribune’s application with the same technology. Since the first application was designed for IHT—a newspaper, my design challenge was to redesign the application—economically with as little effort as possible—to our needs, and to convey a look more suited for a digital media brand such as MTV3.

In comparing the two, reading and browsing gestures work the same in IHT and MTV3 applications. Layout and anything that was visually tied to print media has been redesigned for a digital brand.

Touching up a mobile webmail service

MTV3 Mail service ‘Luukku’ has been wanting an overhaul for a long time.

Due to limited screen spaces, it leaves less room for designer to work in. Mobile design is all about function and all aesthetics must be subject to functionality. This means we will be doing quite a bit of more testing than in our other projects. It also means that mobile presence of a brand needs to be boiled down to minimum.

When a service has been untouched for a long time it becomes less attractive for advertisers. Empty ad spaces leave holes in the design—something I did not foresee when designing this layout several years ago.

How did it get left so far behind? Maybe since the original HTML has been rather well constructed—this old work horse has been made less of a priority—But would it have gotten a make-over much sooner, had it been poorly designed?

Color scheme in Luukku webmail was bright – we might either go with that or introduce brand colors with a strong scheme. Microsoft Metro is all about ”Authentically Digital” – Maybe this approach could give the service a bit of a look of a web application?

Luukku styles
…or maybe not. Playing with brand colors proves that red is far out. In background it’s wild and using red in buttons suggests they all have alert functions. What was I thinking…?
I decided to keep a slightly more traditional approach and gave up the alert colors. With some quick tests that I ran with my colleagues, my options boiled down to these three.
Luukku Color schemes
Fonts for Android is more complex issue
Roboto
Scott Grannemans article about mobile fonts.

Hyphenation in web documents

Long words are typographically troublesome when you lay out pictures and words in tight columns. You might need to promote a lot of stories simultaneously, or convey an impression that your pages are packed with content. Then those long words can really mess up your layout. This is typically the case with front pages, in articles the layout is more narrative and you can use space freely.

Hyphenation is important in languages where long words occur on a regular basis. Finnish language has words such as kymmensormijärjestelmä (ten finger system) and ylioppilastutkintolautakunta (Student exam committee). German, Swedish and Hungarian equally have their share of long words.

Soft hyphen example

Hyphenation example

Normal text (top) and with soft hyphen applied (below)

There are subtle improvements hyphenation can achieve. This example illustrates the significance hyphenation has on how a block of text is laid out in a browser. On top is a screen capture with normal text, no hyphenation applied. Below the soft hyphens are manually applied like this:

…ilta­­­puvuista ja juhla­­kam­pauk­­sista…
itse­­näisyys­­päi­vän vas­taan­­otol­la…

Browser will apply word breaks when necessary.
Unless you have a content management system capable of inserting soft hyphens, hyphenation must be applied manually. Currently I have no knowledge of any such systems. Please feel free to suggest a way to accomplish this.

Test for screen reader users

I am trying to define the best practice to mark up “breadcrumbs” -element. If you are a blind person using a screen reader, your experience is especially important to me. Please test the following examples and write me a comment. In your answer, please explain:

  • How do these breadcrumb examples  appear to you?
  • Does your screen reader read out the separator glyphs? Which are the ones not red out loud?
  • Do you find any of the examples more useful or annoying than the others?
  • Do you find breadcrumbs useful in general?
  • 1. Breadcrumbs example using Double right-pointing angle quotation mark as a separator glyph:

    Home » Section » Subsection » Current page

    2. Breadcrumbs example using Greater than glyph as a separator glyph:

    Home > Section > Subsection > Current page

    3. Breadcrumbs example using Single right-pointing angle quotation mark as a separator glyph:

    Home › Section › Subsection › Current page

    4. Breadcrumbs example using Forward slash as a separator glyph:

    Home / Section / Subsection / Current page

    5. Breadcrumbs example using Bullet as a separator glyph:

    Home • Section • Subsection • Current page

    7. Breadcrumbs example using Forward arrow as a separator glyph:

    Home → Section → Subsection → Current page

    End of test.

    To find out more, see my previous article Semantically styling breadcrumbs.

    Semantically styling breadcrumbs—What’s wrong with » > › → / • ?

    We need to optimize our sites for search engines, but shouldn’t we do it in a semantically correct manner?

    Apparently I’m a year late with this topic – It was about a year ago, when Google started adding breadcrumbs to SERPS, but hopefully it will make it easier to find the answers I’m looking for.

    I am designing (location) breadcrumbs on our website. However I feel something’s not right. I don’t think Google quite hit the accessibility spot yet, and I’m curious to know how they recognize Breadcrumb data? Google are instructing us to use » a DOUBLE RIGHT-POINTING ANGLE QUOTATION MARK as a breadcrumb separator, but I’m reluctant to do this, since it is plain wrong.

    When Google displays the URL as a breadcrumb, they are using a SINGLE RIGHT-POINTING ANGLE QUOTATION MARK as a separator. This too is wrong, since this glyphs in use do not semantically imply site hierarchy. This would hardly matter if we were only building breadcrumbs for Google SERPS, but building breadcrumbs for our users makes it a big issue.

    Search result in Google
    A Google search result with site hierarchy

    Google also recognizes greater than (>) symbol as a breadcrumb separator. This is the worst of all practices. All breadcrumbs are annoying for screen readers, but if they encounter “Home-greater-than-Subsection” gibberish, the browsing experience will become somewhat absurd. If you are using a screen reader, please take this test.

    Why does the right way not work?

    Why should particular glyphs work and some do not …and why should we care—aren’t the screen reader folks just a bunch of blind folks, anyway? Well, the Internet is for everyone, and before making the choice between the popular thing and the right thing, we need to understand the difference. It looks like Google chose these glyphs for their popularity. So what is wrong with adapting a popular convention? Same thing as using your teeth to open bottle caps. There is a right way too.

    Apple Store has a breadcrumb element <ol id=”breadcrumb”> which Google does not recognize. Had Apple Store used semantically incorrect greater than -symbol (>), they would do a lot better with their SERPs, but that would be evil.

    Separator glyphs recognized by Google

    1. Double right-pointing angle quotation mark, recommended by Google as a best practice:

    Home » Section » Subsection » Current page

    2. Greater than glyph:

    Home > Section > Subsection > Current page

    3. Single right-pointing angle quotation mark that Google uses in their SERPs:

    Home › Section › Subsection › Current page

    4. Forward slash:

    Home / Section / Subsection / Current page

    Separator glyphs not recognized by Google

    5. Bullett style in whitehouse.org:

    Home • Section • Subsection • Current page

    6. Semantically correct separator image added with a style sheet. Live Example.

    Google SERP for Apple Store.

    Home (image) Section (image) Subsection (image) Current page

    7. Unicode arrow style in Clearleft.com

    Home → Section → Subsection → Current page

    Examples 1-5 have a semantically incorrect meanings. And the sad thing is only these are recognized by Google as breadcrumbs. Read Jacob Gube’s article breadcrumbs best practices and Hongkiat’s article examining breadcrumbs to see even more styles.

    Update

    Thank you for comments, and thank you all who pointed out the Unicode arrow → (&rarr;) which I failed to notice in my initial text. See Allan Wood’s explanation of various arrow styles available in Unicode. Could this be the separator glyph best describing the proper use of the breadcrumbs element? Sadly, it looks like Google fails to understand it, which makesit harder to reap the benefits of a good SERP result.

    as long as we have to keep making a choices between getting good SERP results and using semantic markup, I can not recommend any of the methods described here. Until then, my business-driven choice will be Single right-pointing angle quotation mark, and Unicode arrow in my personal work, both marked up with Microdata.

    Marking up Breadcrumbs with RDF and Microdata

    According the latest information from Google, there might be a solution to  indicate breadcrumb element using RDF or Microdata. Apparently this is an experimental technique that can not be tested. However Microdata alone does not do the job just yet: A google search for a game  “Polar Bear Bounce“, does not give rich SERP results, even though the breadcrumbs are formatted with microdata.

    Further reading

    Angela Colter has studied the subject and wrote an illuminating article on how people are reading breadcrumbs. Rocky Fu has written about building breadcrumbs, and Jacob Gube wrote about styling them. Also, see Ann Smarty’s excellent article on Search Engine Journal about Breadcrumbs Best Practices.