Design it in 14 days

our first time with Windows 8 UI on mobile

Design it in 14 days

Kamil Łukasiewicz User Experience Specialist kamil.lukasiewicz@nokaut.pl

Krzysztof Piwowar UX Consultant & Owner kp@magnetise.pl

Long ago there weren’t any computers on the world… it’s true!

http://www.geek-world.com.pl/wp-content/uploads/2011/01/trzepak03.png

Signs are useful

http://smallandmighty.net/Media/Default/Windows-Live-Writer/696da96e2275_9BCF/image_2.png

Metro it’s like SKM it’s a train in Tricity in Poland ;)

http://upload.wikimedia.org/wikipedia/commons/c/c2/EN57-1089ra_of_Tr%C3%B3jmiejska_SKM.jpg

Metro is like LEGO

http://www.funkydiva.pl/wp-content/uploads/2012/05/kolorowanki-lego-18.jpg

http://nathanjohnbarnes.files.wordpress.com/2012/05/greek_philosopher_busts.jpg

Metro is a philosophy

How Windows 8 sees itself?

Metro is passé... Windows 8 is trendy

http://duller.kukuchew.com/wp-content/uploads/2010/06/super-sexy-cpr.jpg

Windows 8 is SEXY

http://wallpapersget.com/wp-content/uploads/2012/02/model-men-muscle-wallpaper.jpg

Windows 8 is SEXY

Intensive colours

Typography

http://freebiesbug.com/wp-content/uploads/2012/12/windows-8-metro-psd-icons.jpg

Icons

New system Windows 8 it’s not only interface revolution. It’s also an attempt to re-define how people are using personal computer.

GRAFIKA

”windows” R.I.P. New system gives an opportunity to use old shell (icons and windows), but in a near future it can die like DOS.

GRAFIKA

Siłą udział w rynku 92%* operation systems on desktop computers are from Windows family. 45%* belongs to Windows 7 and 3%* to Windows 8 * data source: netmarketshare.com

GRAFIKA

Nie można wyświetlić obrazu. Na komputerze może brakować pamięci do otwarcia obrazu lub obraz może być uszkodzony. Uruchom ponownie komputer, a następnie otwórz plik ponownie. Jeśli czerwony znak x nadal będzie wyświetlany, konieczne może być usunięcie obrazu, a następnie ponowne wstawienie go.

Nie można wyświetlić obrazu. Na komputerze może brakować pamięci do otwarcia obrazu lub obraz może być uszkodzony. Uruchom ponownie komputer, a następnie otwórz plik ponownie. Jeśli czerwony znak x nadal będzie wyświetlany, konieczne może być usunięcie obrazu, a następnie ponowne wstawienie go.

http://www.windows8templates.com/

Hub pages gives us a starting points to different sections of the application. In a simple words: it is a screen with different information and different categories.

Hub Pages

Screen that contains in the most cases details of a category or section. It can be built with tiles, lists or paragraphs with text.

Section Pages

http://apps.microsoft.com/

Detail screen - here you can scroll the content only vertically.

Detail Pages

http://techgage.com/

Panorama is for showing different types of information (eg. different sections). Here we can navigate only horizontally.

Panorama

Pivot is for lustrating information about the same context, but in different ways (eg. all information about a user). It also has an additional menu at the top. There shouldn’t be more screens then 4 or 5 (Microsoft recommendation).

Pivot

Title Title

Title Title

Fullscreen - landscape Fullscreen - portrait

Split view - snapped Split view - fill

http://www.engadgeted.net/ Gestures

http://loraleeslooneytunes.com/wp-content/uploads/2012/03/ipad3.jpg

You must design Nokaut24 on Windows 8 (tablet). By the way… you have only 14 days to do this.

http://yourgoldfund.files.wordpress.com/2012/03/pension-timebomb.jpg

A good designer, before he start his job on a platform, that he doesn’t know, he should get to know a guidelines and documentation…

http://s3.amazonaws.com/estock/fspid9/11/47/32/6/annabench-shakespeare-paris-1147326-o.jpg

Main screen Here you start your journey.

Product details Here you read about product.

Products list Here you choose products.

`

Different way of navigation

What about traps??? ... we have found some of them

http://www.negotiationlawblog.com/uploads/image/Traps%20for%20the%20Unwary(1).jpg

It’s time to start your documentation... No one said that it will be simple!

http://fc00.deviantart.net/fs70/f/2010/341/0/2/bureaucracy_by_itsk-d34auc8.png

They give you a feedback... But what you should do with it?!?

http://flowchainsensei.files.wordpress.com/2012/09/megaphone.jpg

http://flowchainsensei.files.wordpress.com/2012/09/megaphone.jpg

http://flowchainsensei.files.wordpress.com/2012/09/megaphone.jpg

1.  UXBooth (at the end you will find some interesting links) http://www.uxbooth.com/articles/lessons-learned-designing-a-windows-8-app/.

2.  Windows 8 User experience guidelines http://download.microsoft.com/download/C/0/A/C0AEF0CC-B969-406D-989A-4CDAFDBB3F3C/Win8_UXG_RTM.pdf.

3.  Windows 8 navigation http://msdn.microsoft.com/en-us/library/windows/apps/hh761500.

4.  Windows 8 templates http://msdn.microsoft.com/en-us/library/windows/apps/hh700403.

5.  Typography http://msdn.microsoft.com/en-us/library/windows/apps/hh700394.

http://stannsw.org/wp-content/uploads/2011/12/Clip-Art-Books-Bibliography.jpg

Kamil Łukasiewicz User Experience Specialist kamil.lukasiewicz@nokaut.pl

Krzysztof Piwowar UX Consultant & Owner kp@magnetise.pl

http://futurecomms1.files.wordpress.com/2013/01/thanks.jpg