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
Thank you
?