who i am - roblox blog · 2018. 12. 19. · designing great ux across platforms play test iterate...

Who I Am

Grace Linhahamonkey5

What is UX?

What Do I DO?

Social Media Links

Designing Great UX

Across Platforms

Why you should care?

Players are on

Platforms

Screen Size

InteractionDifferences

Screen Size

InteractionDifferences

Mobile – Touchscreen . Fingers

Desktop – Mouse . Keyboard

Console – Gamepad

Tips

Layout Interaction Visual

Layout is where the UI elements are placed

Mobile First

Restrictions

Thumb Zone

Layout

Mobile First

Why?

Mobile players are Growing

Easier to add than cut down

What happens if…

Started on Desktop

Desktop to Phone

Phone

Can’t Fit

Mobile First

● Start from small screens● Prioritize content● Less is more, focus● Moving to larger screens is easier

Mobile First

Restrictions

Thumb Zone

Layout

Restrictions

Restrictions

● Avoid the red areas• Menu Bar

• Move and Jump controller

Mobile First

Restrictions

Thumb Zone

Layout

Play with thumbs

Thumb Zone

Thumb Zone

Thumb Zone

Thumb Zone

Thumb Zone

Thumb Zone

Thumb Zone

● Main actions in the green area● Make thumbs happy

All Together

Mobile First

(Small Screens)

Mobile First

Restrictions

Mobile First

Restrictions

Thumb Zone

Mobile First

Restrictions

Thumb Zone

Larger Screes

Interaction is how players interact with UI

No Conflicts

Touch Target

Game Pad Navigation

Interaction

No Conflicts - Overlapping

No Conflicts - Overlapping

No Conflicts - Overlapping

Can’t Move

No Conflicts – Muscle Memory

No Conflicts – Muscle Memory

What Happened?!!!

No Conflicts

● Think about user flow and layout● Think about restrictions● Think about common usage

No Conflicts

Touch Target

Game Pad Navigation

Interaction

Touch Target

Touch Target

Touch Target

Wrong One!

Touch Target

● Big enough buttons● Comfortable spacing

No Conflicts

Touch Target

Game Pad Navigation

Interaction

Game Pad Navigation

Game Pad Navigation

Game Pad Navigation

● Limited movements● Starting point

Visual is what players see in your game

Consistency

Readability

Visual Feedback

Visual

Consistency – Font Size

Consistency – Font Size

Consistency

● Font sizes ● Spacing● Colors

Consistency

Readability

Visual Feedback

Visual

Readability – Font Size

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in volutpat nisi. Quisquecondimentum rhoncus est, velpharetra magna placerat eu. Quisque placerat mi ut facilisiselementum. In hac habitasse plateadictumst. Sed vitae dolor euismod

Lorem ipsum dolor sit amet, consecteturadipiscing elit. Maecenas in volutpat nisi. Quisque condimentum rhoncus est, velpharetra magna placerat eu. Quisqueplacerat mi ut facilisis elementum. In hachabitasse platea dictumst. Sed vitae dolor euismod

Readability – Font Size

Lorem ipsum dolor sit amet, consecteturadipiscing elit. Maecenas in volutpat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in volutpat nisi. Quisquecondimentum rhoncus est, velpharetra magna placerat eu. Quisque placerat mi ut facilisiselementum. In hac habitasse plateadictumst. Sed vitae dolor euismod

Readability – Color Contrast

Button Button Button

Button ButtonButton

Readability – Contrast Checker

Readability

● Make it easy to read• Font sizes

• Spacing

• Color contrast

Consistency

Readability

Visual Feedback

Visual

Visual Feedback - Mobile

Enabled Press Disabled

Visual Feedback - Desktop

Enabled

Press Disabled

Hover

Visual Feedback - Console

Enabled Select

Press Disabled

Visual Feedback

● State changes● Let players know what’s going on

Recap

Designing Great UX across Platforms

● Layout• Mobile First

• Restrictions

• Thumb Zone

Designing Great UX across Platforms

● Interaction• No Conflicts

• Touch Target

• Game Pad Navigation

Designing Great UX across Platforms

● Visual• Consistency

• Readability

• Visual Feedback

Designing Great UX across Platforms

● Play test <-> Iterate● Test on real devices● Give more love to your players