ZBSee: UX design process

ZBrush

04/08/2014, By Andriy Vaskiv

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

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

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

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

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.

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

Top Row

Navigation (global)

Through Main Menu:

– Between views

• All updates;

• Users you follow;

• Top row

– Account settings

– Search

Navigation (local)

Through entry:

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

images/videos – horizontal scrolling

– Etc.

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).

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

UI samples

Thread entry with multiple images Thread entry description

UI samples

Navigation between thread entry images Thread entries navigation

UI samples

Images view in carousel

UI samples

Entry comments Comment with quoteComment with image

UI samples

Main Menu Thread entries navigation Entry menu

UI samples

User details

UI samples

Top Row Search

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.

• …

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

Demo

http://gfv7mc.axshare.comiPhone

Thank you

?