design tips for series 40 game developers

1

Design tips for Series 40 game developers

© Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Overview

2 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Overview • Series 40 full touch specific characteristics • Navigation and settings • In-game interaction • Take home messages • Exercises

Series 40 full touch specific characteristics

3 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

This is an entry level phone.

4 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

The compact phone is equipped with a 3’’ screen and acceleration sensors.

5 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Navigation and settings

6 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

People want to start, pause and exit a mobile game fast – with one tap.

7 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Allow people to skip the intro.

8 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Avoid scrolling and swiping to access any feature.

9 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

10 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Example: Make it big.

11 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Split screens up into 2 screens when necessary.

12 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

E7 Symbian Belle

Series 40 full touch

Do not rely on icons only.

13 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Be consistent with icon metaphors – text might solve the problem.

14 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

There is no focus in Series 40 touch phones.

15 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Hide all non-touch related views and check your help text about non-touch.

16 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Combine sound settings at the start with other settings or calls-to-action.

17 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Settings should be persistent and mute sound if the phone is silent.

18 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Always ensure a way back to the game.

19 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Use a virtual keyboard with QWERTY layout, not with ABCDEF nor a tumbler.

20 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Drill down structure suits for most of the games.

21 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Take care of your business drivers.

22 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

In-game interaction

23 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

A button is a button and a button is a button.

24 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Make navigation and special function buttons visible.

25 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

In portrait, one finger easily hides 1/3 of the relevant screen area.

26 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Resistive screens might have trouble with multipoint gestures.

27 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Do drag and drop with an offset, since you do not see the target otherwise.

28 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

screen screen

people’s view

screen

people’s view

Dialogs must put everything else to the background.

29 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

If levels take longer than seconds, find a way to continue where terminated.

30 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Test it – on the device not only on the workstation.

31 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Take home messages

32 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

33 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

People want to play – but not with your menus.

34 © Nokia 2012 UX Basics.pptx v. 0.1 YYYY-MM-DD Jan Krebber

Adapt the interaction to the limited screen real estate.

35 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

More on the topic:

36 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Game design: http://www.developer.nokia.com/Resources/Library/Design_and_UX/#!designing-different-applications/game-design.html UX Library: http://www.developer.nokia.com/Resources/Library/Full_Touch/ UX Checklist: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!ux-checklist.html Icon Creation: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!icon-creation.html UI Components: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!ui-components.html UI Components Demos App: https://projects.developer.nokia.com/s40uivisualisation UX Basics: http://www.developer.nokia.com/Resources/Library/Design_and_UX/ Wiki article to this webinar: http://www.developer.nokia.com/Community/Wiki/Series_40_UI_game_design_tips_webinar_%E2%80%93_companion_article

Exercises

37 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Exercise: What is the minimum size of a standard touch area and its margin?

38 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

- The answer should relate to size in cm and amount of pixels in Series 40 full touch devices.

Exercise: How would you catch up for a too small touch area?

39 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

E.g. Your touch area is only 4 mm x 4 mm, with only 0,3 mm margin, what would you do to support people playing with your game?

Exercise: What does your application do if people press the red end key?

40 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Exercise: The phone is muted, but the user set ”sound on” during the last game session. How does your game behave now that it is opened?

41 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Exercise: How would you change the following UI component?

42 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Exercise: Where would you place your in-app purchase access?

43 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Exercise: How does your game handle the backlight timeout?

44 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

You find more information from here: http://www.developer.nokia.com/Resources/Library/Design_and_UX/#!designing-different-applications/game-design/game-user-experience-guidelines.html

Thanks to: - Anne Kivimaa - Sanna Hiukka

45 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber

Thanks ext-jan.krebber@nokia.com

46 © Nokia 2012 Design_tips_for_Series_40_game_developers.pptx 2012-09-13 Jan Krebber