What can we learn from Mobile User Interface Design?
Since several month, I'm working on a iPhone App. So, I started to analyze by myself Mobile App to define the best practices/golden rules I should follow.
I looked also for articles on the web, and I've found an interesting one written by Selma Zafar and titled Introduction to Mobile User Interface Design. What surprise me is that the main ui design principles can be apply to game design too and game processes. So let's see what we can learn from it.
I looked also for articles on the web, and I've found an interesting one written by Selma Zafar and titled Introduction to Mobile User Interface Design. What surprise me is that the main ui design principles can be apply to game design too and game processes. So let's see what we can learn from it.
Part A: User Centered Design Process
In the first part of his presentation Selma Zafar talk about the 5 step process to build a good mobile ui design. What's interesting is the "user centered" term 'cos it's what we do in video game, user centered design. Let's talk about each steps:
Step 1: User Requirements Analysis
In mobile design it means:
- Decide on product goals
- Determine the user needs
- conduct one or many usability evaluations: Heuristic evaluation, competitive analysis, user interview and surveys
In video game it should be the conception step where you try to define your game. If you're an indie developer you can do a game you would like to play, but when you do a AAA game you must decide wisely on product goals, determine the user needs and conduct competitive analysis, user interviews, etc, if you don't want to miss your target and make your company spend money for a game that will not sell.
Step 2: Conceptual Design, Prototypes and Evaluation
- Sketch out a high level product design
- Rapidly create visual representations (mockups) or interactive representations (prototypes) of the product.
- Evaluate usability through: Heuristic evaluation, Focus groups, Usability testing
- Iterate design with evaluation results
This step looks like a preproduction in video game: you do prototypes for gameplay ideas. You also sketch out a high level product design for mobile app, which is exactly the same in video games: you don't need to spend time in a big game design documentation about what you want to put in your game, iterate on ideas and make playable prototypes to know if your ideas that should look good on paper look still cool on the screen (and it's rarely the case).
Another important thing for me is the usability evaluation through playtests. It's what we have done a lot during Tintin (the game from the movie) preproduction. For every gameplay features, ingredients, we have organized playtests sessions to iterate and improve our design, signs & feedbacks.
Step 3: Design and Implementation
- Revise user interface based on concept evaluation.
- Apply style and look & feel to design
- Create the user interface using standards-compliant code
- Design for accessibility
The previous step was more focused on functionalities (the gameplay in video game). Now it's time to add the look & feel made by the artists (you must understand that the prototypes done until know was very rough and only focused on the gameplay, not the look & feel). And it's not because the previous step passed the playtests that it will be ok with the decorated gameplay sequences. It's often the opposite! Graphics can often makes the screen less clear, the gameplay objectives less understandable, the enemies less visible. That's why it's important to do playstests at this step again.
So this step looks like the production: you use the prototypes done during the preprod and add the look & feel, the narrative objectives, etc.
Step 4: Usability Evaluation
- Conduct usability evaluation on the final design
- Work with the design and development team to improve the product based on evaluation results
- Repeat this process (Production iteration) until the organizational/business goals are met
This step looks like the polish phase that occur at the end of the game production. You make playtests (again!) on the final walkthrough and fix the last signs & feedbacks needed, or the difficulty peaks.
What's interesting is when he's talking about the organizational/business goals. I don't remember hearing any clear goals during my game developments, except if it's a Metacritic ranking ;)
Step 5: Launch and Maintenance
- Document everything
- Continue to collect feedbacks from users/customers to improve the product in futures releases: surveys, focus groups
Well, I don't understand the "document everything". Is it for the users or for the developers? Who knows?
About the "continue to collect feedbacks", it's something I would like to do after each game I've made, but most of the time the team is decomposed, and people send to other projects. I think it would be interesting to keep a small team alive to track the players behaviors, and update the game later with bug and design fixes. Even if you do playtests during the all game development, it's always less relevant that playtests with millions of players :)
----------
Part B: Interaction Design Principles
In this next part, he talks about ui design principles, and as you will see, it can be fully apply to game design too!
1. Learnability
- An interface should be easy to use from the first time
- Amount of functionality presented to the user should be limited to exactly what the user requires to get their goal
2. Efficiency
- Number of steps it takes for a user to complete a task
- Key tasks should be made as efficient as possible
3. Memorability
- Interface should be easier to use each time the user interacts with it.
- Frequency of use is the key factor in memorability
4. Error Recovery
- In a perfect user interface, users should never be allowed to make a mistake
A quick note about that 'cos it's very important. In a game, the player make choices. In a perfect game design, the player should not be able to make a bad choice without knowing it. You must always give to the player all the needed information to make the best choice. Then, if the player make a bad choice, it's his fault not yours.
5. Simplicity
- Usual tasks should be easy and less common tasks should be possible
- Avoid unnecessary functionality
To avoid unnecessary functionality, you should know the game you do, and for who.
6. Mapping
- What the user expects to happen when they interact with the interface is exactly what should happen
An interesting one!!! It's a game design rule for every gameplay ingredients: the behavior of the ingredients should be exactly what should happen. It can be summary by: Form follows function!
7. Visibility
- Important information should be the most visible and less important information should be less visible
- Understanding he users goals is critical
Here we have level design rules. Only the important elements (for the gameplay) should be noticeable by the player.
8. Feedback
- User should always be in control of the interface and not the other way around
9. Consistency
- Like-items should always be displayed and act the same way across the entire application (and even between applications)
- UI standards
There's also standards in video game, and you must know them if you want your players to enjoy your game. Except if it's your purpose to break the rules ;)
I will stop here, but the rest of the presentation is quite interesting too. I encourage you to read it.
----------
Conclusion
Mobile Interface design or Game Design share the same main principles: User Centered Design!
In the first part of his presentation Selma Zafar talk about the 5 step process to build a good mobile ui design. What's interesting is the "user centered" term 'cos it's what we do in video game, user centered design. Let's talk about each steps:
Step 1: User Requirements Analysis
In mobile design it means:
- Decide on product goals
- Determine the user needs
- conduct one or many usability evaluations: Heuristic evaluation, competitive analysis, user interview and surveys
In video game it should be the conception step where you try to define your game. If you're an indie developer you can do a game you would like to play, but when you do a AAA game you must decide wisely on product goals, determine the user needs and conduct competitive analysis, user interviews, etc, if you don't want to miss your target and make your company spend money for a game that will not sell.
Step 2: Conceptual Design, Prototypes and Evaluation
- Sketch out a high level product design
- Rapidly create visual representations (mockups) or interactive representations (prototypes) of the product.
- Evaluate usability through: Heuristic evaluation, Focus groups, Usability testing
- Iterate design with evaluation results
This step looks like a preproduction in video game: you do prototypes for gameplay ideas. You also sketch out a high level product design for mobile app, which is exactly the same in video games: you don't need to spend time in a big game design documentation about what you want to put in your game, iterate on ideas and make playable prototypes to know if your ideas that should look good on paper look still cool on the screen (and it's rarely the case).
Another important thing for me is the usability evaluation through playtests. It's what we have done a lot during Tintin (the game from the movie) preproduction. For every gameplay features, ingredients, we have organized playtests sessions to iterate and improve our design, signs & feedbacks.
Step 3: Design and Implementation
- Revise user interface based on concept evaluation.
- Apply style and look & feel to design
- Create the user interface using standards-compliant code
- Design for accessibility
The previous step was more focused on functionalities (the gameplay in video game). Now it's time to add the look & feel made by the artists (you must understand that the prototypes done until know was very rough and only focused on the gameplay, not the look & feel). And it's not because the previous step passed the playtests that it will be ok with the decorated gameplay sequences. It's often the opposite! Graphics can often makes the screen less clear, the gameplay objectives less understandable, the enemies less visible. That's why it's important to do playstests at this step again.
So this step looks like the production: you use the prototypes done during the preprod and add the look & feel, the narrative objectives, etc.
Step 4: Usability Evaluation
- Conduct usability evaluation on the final design
- Work with the design and development team to improve the product based on evaluation results
- Repeat this process (Production iteration) until the organizational/business goals are met
This step looks like the polish phase that occur at the end of the game production. You make playtests (again!) on the final walkthrough and fix the last signs & feedbacks needed, or the difficulty peaks.
What's interesting is when he's talking about the organizational/business goals. I don't remember hearing any clear goals during my game developments, except if it's a Metacritic ranking ;)
Step 5: Launch and Maintenance
- Document everything
- Continue to collect feedbacks from users/customers to improve the product in futures releases: surveys, focus groups
Well, I don't understand the "document everything". Is it for the users or for the developers? Who knows?
About the "continue to collect feedbacks", it's something I would like to do after each game I've made, but most of the time the team is decomposed, and people send to other projects. I think it would be interesting to keep a small team alive to track the players behaviors, and update the game later with bug and design fixes. Even if you do playtests during the all game development, it's always less relevant that playtests with millions of players :)
----------
Part B: Interaction Design Principles
In this next part, he talks about ui design principles, and as you will see, it can be fully apply to game design too!
1. Learnability
- An interface should be easy to use from the first time
- Amount of functionality presented to the user should be limited to exactly what the user requires to get their goal
2. Efficiency
- Number of steps it takes for a user to complete a task
- Key tasks should be made as efficient as possible
3. Memorability
- Interface should be easier to use each time the user interacts with it.
- Frequency of use is the key factor in memorability
4. Error Recovery
- In a perfect user interface, users should never be allowed to make a mistake
A quick note about that 'cos it's very important. In a game, the player make choices. In a perfect game design, the player should not be able to make a bad choice without knowing it. You must always give to the player all the needed information to make the best choice. Then, if the player make a bad choice, it's his fault not yours.
5. Simplicity
- Usual tasks should be easy and less common tasks should be possible
- Avoid unnecessary functionality
To avoid unnecessary functionality, you should know the game you do, and for who.
6. Mapping
- What the user expects to happen when they interact with the interface is exactly what should happen
An interesting one!!! It's a game design rule for every gameplay ingredients: the behavior of the ingredients should be exactly what should happen. It can be summary by: Form follows function!
7. Visibility
- Important information should be the most visible and less important information should be less visible
- Understanding he users goals is critical
Here we have level design rules. Only the important elements (for the gameplay) should be noticeable by the player.
8. Feedback
- User should always be in control of the interface and not the other way around
9. Consistency
- Like-items should always be displayed and act the same way across the entire application (and even between applications)
- UI standards
There's also standards in video game, and you must know them if you want your players to enjoy your game. Except if it's your purpose to break the rules ;)
I will stop here, but the rest of the presentation is quite interesting too. I encourage you to read it.
----------
Conclusion
Mobile Interface design or Game Design share the same main principles: User Centered Design!