who i am - roblox blog · 2018. 12. 19. · designing great ux across platforms play test iterate...
TRANSCRIPT
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