Embed Size (px)
DESCRIPTION
Designing mobile app for iOS or Android isn’t something new and mistic these days. Every good company know how to build it. But believe us or not, designing for Windows 8 UI is a new concept for UX designer. And it isn’t as easy as it seems. Really! Especially when you do it for the first time in your live and you have only 14 days for this! We managed to do this task, that's why we would like to share our experience with you and tell you a little story. A story about putting first steps in unknown land. How to use touch and gestures. Where our heroes found tricky traps and what Microsoft doesn’t tell you… officially. Go with us on a journey to meet a new adventure.
Citation preview
our first time with Windows 8 UI on mobile
Design it in 14 days
Kamil Łukasiewicz User Experience Specialist [email protected]
Krzysztof Piwowar UX Consultant & Owner [email protected]
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 [email protected]
Krzysztof Piwowar UX Consultant & Owner [email protected]
http://futurecomms1.files.wordpress.com/2013/01/thanks.jpg
