Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Mobile Interfaces

No description
by

Penny de Byl

on 4 October 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Mobile Interfaces

Mobile Interfaces
Interface Types
1. Mobile Mindset
2. Mobile Contexts
3. Global Guidelines
Mobile Interface Design Rules
1. Mobile Mindset
2. Mobile Contexts
3. Global Guidelines
4. Navigation Models
5. User Input
6. Orientation
7. Communications
8. Launching
9. First Impressions
4. Navigation Models
Tilt and Acceleration
Layout
Resolution
Contrast
Repetition
Alignment
Proximity
Corners
Left & Bottom
Bottom
When there was just the iPhone GUI Layout was EASY!

On a mobile device the display is also the controls.
The POWER of the Stroke!
Orientations
Input.deviceOrientation

Device Orientation.Unknown
Device Orientation.Portrait
Device Orientation.PortraitUpsideDown
Device Orientation.LandscapeLeft
Device Orientation.LandscapeRight
Device Orientation.FaceUp
Device Orientation.FaceDown
Input.acceleration.x
Input.acceleration.y
Input.acceleration.z
void Update ()
{
this.transform.Rotate(Vector3.forward * Input.acceleration.x/sensitivity);
this.transform.Rotate(Vector3.right * Input.acceleration.z/sensitivity);
}
Designing for Different Resolutions
Designing for Different Resolutions
Design for the smallest
resolution and pad out the gaps
with background art!
3D Camera
will automatically zoom.
2D GUI Items will Not.
Be Focused
More, is just more.
Be ruthless editing your features.
Rage of Bahamut (Cygames)
“Tokyo-based developer Cygames recently revealed that half of its 20 million overall players are playing Bahamut. That would make it one of the most popular games in the world. That’s surprising because it’s also a real piece of crap.”- Wired
Clash of Clans
Be Unique
There are over 630K games in the Apple App Store and over 115K games in Google Play.
How are you different?
Be Charming
Be Considerate
Don't focus on what would be fun to develop.
Put yourself in the player's shoes.
Friendly, reliable and fun to use.
Bored
Busy
Lost
Sitting at home on the couch, what do you pick-up?
Your Phone! (/tablet)
People want immersive, delightful experiences geared towards longer usage but that can be interrupted.
Lives are busy.
Design micro-moments and micro-achievements into your games.
In transit, poor connectivity, battery life.
include offline elements to your game
regular backups/saves of progress
Responsiveness
Polish
Thumbs
Targets
Content
instantly respond to player input
let the player know what's going on
Consistent Design (colours, animations, UI, sounds, cut scenes, marketing material)
Subtle UI Animations
Clean HUD
Scale across multiple resolutions
Perceived performance optimisations
Design for the thumbs.
Touch areas on the screen need to be thumb friendly.
44 x 44 pixels is the smallest an UI item should be.
Minimise the UI
Put the content front and centre.

Think Diegetic!!
Controls
Controls at the bottom of the screen.
Controls at the top work for interfaces on mouse driven screens as the mouse pointer is small.
The pointer on a mobile device (ie your finger) comes with a meaty, screen blocking attachment.
Pick the one that makes the most sense for your game.
None: Single Screen
Buttons/Tabs: 3 to 6 distinct content areas
Drill Down: List and detail content in a hierarchy
Radial Corner:
5. User Input
Nobody likes to type on a mobile device so limit this option.
Common Gestures: touch, swipe, pinch and zoom, tap
Complex Gestures: Drawing on the screen
Accelerometer & Gyroscope
GPS Coordinates
Camera
Image Recognition
Sound Recognition
Voice Recognition
AR Defender 2
Spellcrafter
6. Orientation
Portrait is popular for utility apps.
Landscape is popular for games.
(So popular people take vertical videos!!)
...but works well for puzzlers and endless runners.
Don't flip the orientation DURING the game (unless it's a gameplay mechanic).
Beggar's Ride
Snowboard Party 2
7. Communications
always provide feedback for player interactions (sounds, vibrations, animations, other visuals)
modal alerts (only when necessary)
confirmation (are you sure?)
8. Launching
game should resume where the player left off
not always possible when iOS shuts the game down after inactivity
store player progress information for resumption
9. First Impressions
Your Icon
Your Loading Screen
Your Music
Intuitive Control: Start playing immediately.
unique
simple
no words
vibrant restricted set of colours
use a template (https://applypixels.com)
Icon Design Tips
Demo of UI Components
and Canvas Scaler
Full transcript