ZBSee: UX design process

22
ZBrush 04/08/2014, By Andriy Vaskiv

description

The UX design process of an iOS app for the http://www.zbrushcentral.com/ forum.

Transcript of ZBSee: UX design process

Page 1: ZBSee: UX design process

ZBrush

04/08/2014, By Andriy Vaskiv

Page 2: ZBSee: UX design process

Agenda• Task definition -> Challenges• IA• Views• Navigation (global, local)• Working with images/videos• UI Samples• Interactions• Demo

Page 3: ZBSee: UX design process

TaskDevelop UX of the native iOS app for viewing of forums on http://www.zbrushcentral.com/

Page 4: ZBSee: UX design process

Challenges

• Easy navigation between threads• Easy navigation between thread entries• View all updates• View particular thread• View particular thread entry• Multiple images and/or videos on thread entry• User account• Work with comments

Page 5: ZBSee: UX design process

IA

• Thread – forum topic started by registered and authenticated user (thread owner);

• Entry – thread comment (description) with any images/videos added by the thread owner (!);

• Images/videos – thread entry can have any number of images/videos;

• Comments – only the latest added thread entry can be commented by users. As soon as thread

owner adds the new thread entry all the user comments will be added to it.

Forum Thread Entry

Description

Images

Videos

Comments

1 n 1 n

1

1

n

n

n

Page 6: ZBSee: UX design process

Views

All updates – all entries for all threads displayed on the screen with infinite vertical scrolling. Sorting – latest on top. Ability to see entries starting from particular past date.

Users you follow (for registered users only) – all entries for all threads of the users you follow displayed on the screen with infinite vertical scrolling. Sorting – latest on top.

Particular Thread view – all thread entries displayed on the screen with vertical scrolling. Sorting – by date ascending/descending

Particular Thread Entry view – display particular thread entry with ability to navigate to other entries of the thread or to the thread view

Top Row – display tiles with the most popular threads entries. Click on the tile will open the particular thread entry view.

Page 7: ZBSee: UX design process

ViewsAll updates / Users you follow / Particular Thread Particular Thread Entry view

Top Row

Page 8: ZBSee: UX design process

Navigation (global)

Through Main Menu:

– Between views

• All updates;

• Users you follow;

• Top row

– Account settings

– Search

Page 9: ZBSee: UX design process

Navigation (local)

Through entry:

– Between thread entries– Thread entry -> comments– Thread entry -> user details – Between thread entry

images/videos – horizontal scrolling

– Etc.

Page 10: ZBSee: UX design process

Working with images/videos

Zbrush entries images usually have high resolution (average 1600x1200px). Thus:

• On the thread entry the cropped images preview will be displayed;

• Full image will be displayed in the carousel view upon click on the preview. Zoom

option should be available in the carousel;

• In case of multiple images – the same size of the images preview should be

calculated and all previews should be displayed with the same size;

• The image orientation should be detected (portrait vs landscape vs square) and

the preview image size will be calculated accordingly;

• All above should apply for videos as well (boundary case: portrait images and

landscape video – display black ribbons above and beyond video).

Page 11: ZBSee: UX design process

Working with images/videos

Orientation Width (px) Height (px)

Square 640 640

Portrait 640 640 – 800

Landscape 640 480 – 640

Single image/video. Default preview sizes for each orientation:

Multiple images/videos. Default preview sizes for each orientation:

Orientation Width (px) Height (px)

Square 500 500

Portrait 500 640 – 800

Landscape 500 480 – 640

Page 12: ZBSee: UX design process

UI samples

Thread entry with multiple images Thread entry description

Page 13: ZBSee: UX design process

UI samples

Navigation between thread entry images Thread entries navigation

Page 14: ZBSee: UX design process

UI samples

Images view in carousel

Page 15: ZBSee: UX design process

UI samples

Entry comments Comment with quoteComment with image

Page 16: ZBSee: UX design process

UI samples

Main Menu Thread entries navigation Entry menu

Page 17: ZBSee: UX design process

UI samples

User details

Page 18: ZBSee: UX design process

UI samples

Top Row Search

Page 19: ZBSee: UX design process

Interactions• Menu icon:

– visible on 1st screen, fades out on scroll down after leaving image preview area;– fades in on scroll up;

• Comments screen:– show – slide from the right;– hide – slide to the right;

• Main menu:– show – slide from the left;– hide – slide to the left;

• Entries navigation menu / entry menu:– show – slide from the bottom;– hide – slide to the bottom;

• Back button:– disappears on scroll down;– reappears on scroll up;

• Images carousel:– Navigation – swipe left/right;– Close - top right corner.

• …

Page 20: ZBSee: UX design process

Challenges

Easy navigation between threadsEasy navigation between thread entriesView all updatesView particular threadView particular thread entryMultiple images and/or videos on thread entryUser accountWork with comments

Page 21: ZBSee: UX design process

Demo

http://gfv7mc.axshare.comiPhone

Page 22: ZBSee: UX design process

Thank you

?