Overview
What are the most important Interface design rules and how do we test a User Interface that is designed by and for aliens, but is still user friendly for humans?
Have you ever seen a User Interface design that has not been designed by humans? And did you know how to actually use this interface? As an game artist I was really curious how a User Interface for a game would look like, as if it were designed by aliens. In this blog we are going to cover the most important User Interface design rules. With these rules we are going to apply and test these rules on our User Interface designs. We are also going to have a look at how other successful games have applied these rules. In the end we find out which design rules can be broken, and which ones can not. And ofcourse at the end we have a User Interface design that has been tested and been proven user friendly.
Who is this blog for?
This blog is for everyone who finds it difficult to design a User Interface design. People who want to design an aesthetically pleasing User Interface design, but find it difficult to keep it user friendly and clear. Artist that want to experiment with the rules and how far you can go in your design to keep it user friendly. This blog has an alien theme, but can also be used to test rules on a different themed User Interface. You can work along following the steps of this blog by making an User Interface yourself, or follow the blog to learn about how I did it and learn about the design rules and how you can test/ apply them.
What you will learn:
- Different design rules and which five are most commonly used and the most important.
- How you can test and apply these design rules to your own User Interface design.
- How to make an aesthecly appealing User Interface design, but keeping it user friendly.
Below you will find the different chapter, devided into segments.
Chapter 1: The most important UI design rules
Chapter 2: First Alien UI design
Chapter 3: How do other games do it?
Chapter 4: Second Alien UI design
Chapter 5: Testing what we have learned
zondag 5 augustus 2018
Chapter 1: The most important UI design rules
What are the most important User Interface design rules?
In these articles I have noticed the similarities between principles. The principles from Nielsen,
Online you can find a lot of Interaction design guides, and you can find a lot of different rules
and guidelines that you can use when designing. But which rules are the most important and
which ones are most commonly used?
Before we can examine and judge our own User Interface design, we will have to know what rules we are
going to need to apply to it. You can find a lot of Interaction design guides online, but every guide is just a little
bit different. One guide can have ten rules and guidelines, while the next one can have around five.
So which ones are the most important and most commonly used? To find out we are going
to have a look at three different guides. In these different guides we are going to look for similar design rules.
With all the similar rules we can find, we will make a top five rule list. With this list, we will have a good overview
of the most commonly used design rules, that we can eventually apply to our own User Interface design.
and guidelines that you can use when designing. But which rules are the most important and
which ones are most commonly used?
Before we can examine and judge our own User Interface design, we will have to know what rules we are
going to need to apply to it. You can find a lot of Interaction design guides online, but every guide is just a little
bit different. One guide can have ten rules and guidelines, while the next one can have around five.
So which ones are the most important and most commonly used? To find out we are going
to have a look at three different guides. In these different guides we are going to look for similar design rules.
With all the similar rules we can find, we will make a top five rule list. With this list, we will have a good overview
of the most commonly used design rules, that we can eventually apply to our own User Interface design.
I have had a look at three good Interaction design guides online for you guys, the first one being the
User Interface Design Guidelines: 10 Rules of thumb. The second one is Shneiderman’s Eight golden rules
will help you design better interfaces. And the Human- Computer Interaction. These guides were very interesting,
but also very different from each other. But while they had their differences, they also had similarities.
Each one of the guides can be broken down into a couple of principles. Nielsen’s, Molich’s and Shneiderman’s
design rules can be broken down into seven principles.
User Interface Design Guidelines: 10 Rules of thumb. The second one is Shneiderman’s Eight golden rules
will help you design better interfaces. And the Human- Computer Interaction. These guides were very interesting,
but also very different from each other. But while they had their differences, they also had similarities.
Each one of the guides can be broken down into a couple of principles. Nielsen’s, Molich’s and Shneiderman’s
design rules can be broken down into seven principles.
Efficiency: How quickly can users perform tasks?
Memorability: If a user hasn’t visited the system in a while, how well will they remember the interface?
Errors: How many errors do users make, and how quickly can they recover from errors?
Satisfaction: Do users enjoy using the interface, and are they pleased with the results?
Satisfaction: Do users enjoy using the interface, and are they pleased with the results?
And in the book Human-Computer Interaction, usability is broken down into three principles:
Learnability: How easily can a new user navigate the interface?
Flexibility: How many ways can the user interact with the system?
And Robustness: How well are we supporting users when they face errors.
In these articles I have noticed the similarities between principles. The principles from Nielsen,
Molich and Shneiderman are pretty much similar. The principles from the Human-Computer interaction
are pretty much similar with the principles from Nielsen,Molich and Shneiderman’s. I would say that these
articles, are a reliable source of information. Nielsen, Molich and Shneiderman are professionals in the
industry and know what they are talking about. They have a have a good way of passing on the knowledge.
With this information I have made a top five important Interaction design rules, that we shall use in this research
and apply to my own User Interface design.
The five most important interaction design rules we will be using are:
are pretty much similar with the principles from Nielsen,Molich and Shneiderman’s. I would say that these
articles, are a reliable source of information. Nielsen, Molich and Shneiderman are professionals in the
industry and know what they are talking about. They have a have a good way of passing on the knowledge.
With this information I have made a top five important Interaction design rules, that we shall use in this research
and apply to my own User Interface design.
The five most important interaction design rules we will be using are:
Learnability: How easily can a new user navigate the interface?
Efficiency: How quickly can users perform tasks?
Memorability: If a user hasn’t visited the system in a while, how well will they remember the interface?
Errors: How many errors do users make, and how quickly can they recover from errors?
Satisfaction: Do users enjoy using the interface, and are they pleased with the results?
These are the guidelines and rules we will be working with during this tutorial. We shall apply these rules to a
User Interaction design that I have already made. Or you can apply these design rules to your own User Interface.
User Interaction design that I have already made. Or you can apply these design rules to your own User Interface.
Chapter 2: First Alien UI design
Does our Alien User Interface design break any of these rules?
To understand the user interface a little bit more, I will shortly introduced the aliens that have inspired and
These aliens were humans at one point in their life. They came from earth and stranded on a hostile planet that
So this is my unbiased Alien User Interface design. The User Interface is made for a Real Time Strategy game.
Image 2 - My Alien User Interface Design
to the design rules, I made two surveys to test with actual humans. For this research I have chosen to use
surveys, because direct feedback from my target audience is the most useful in this situation. Since the goal of
the user interface is that it is user and human friendly. So for this test I would also recommend you guys using
a survey. Or something similar that gives you direct feedback from a human perspective.
My presumptions are that my current design might not be very practical or natural to use. I think that aesthetically
it might score better. But we will find out! The first survey contains four questions about the Learnability, Efficiency,
Errors and Satisfaction. Twelve people have participated in this survey, and the overall results are pretty negative.
But now we know what is wrong with my design.
Image 3 - Survey test results
The User Interface scored pretty low overall, but especially with learnability and Efficiency. The User Interface
User’s would find it difficult to click on units and navigate through the game. In the charts you can see that the
Which brings us to step 2. Now that we have the most important rules, we can test how user
friendly our User Interface design is. Now in this part we will have a look at an Alien User Interface I made as
an example UI. If you made your own User Interface you can skip this step to step no. 3 and apply these design
rules to your own UI.
Now for step 2 we will have a look at my User Interface design. This design is made with the intention of being
used by aliens, and so it’s designed by aliens. During the design process of this User Interface, I mainly focused
on the aesthetic aspect and the main features a Real Time Strategy User Interface needs.
friendly our User Interface design is. Now in this part we will have a look at an Alien User Interface I made as
an example UI. If you made your own User Interface you can skip this step to step no. 3 and apply these design
rules to your own UI.
Now for step 2 we will have a look at my User Interface design. This design is made with the intention of being
used by aliens, and so it’s designed by aliens. During the design process of this User Interface, I mainly focused
on the aesthetic aspect and the main features a Real Time Strategy User Interface needs.
To understand the user interface a little bit more, I will shortly introduced the aliens that have inspired and
essentially designed this user interface. The background story of these characters explain most of my design
choices.
choices.
Image 1 - The alien race
These aliens were humans at one point in their life. They came from earth and stranded on a hostile planet that
changed them. They mutated to adapt to the hostile environments. They used to think as humans and slowly
became more feral.
became more feral.
So this is my unbiased Alien User Interface design. The User Interface is made for a Real Time Strategy game.
I tried to design the User Interface as if it were designed by aliens. In the design you can find elements that can
also be found in the alien designs. For example the health bar has a spiked design like a crown that the aliens
wears. And since the aliens were humans at one point, the user interface still has some little design elements
that resembles human designs. So let’s see what components we have in this User Interface design.
also be found in the alien designs. For example the health bar has a spiked design like a crown that the aliens
wears. And since the aliens were humans at one point, the user interface still has some little design elements
that resembles human designs. So let’s see what components we have in this User Interface design.
So the User Interface consists of 1. The mini map, here the player can see all the enemies and allies in the area.
It has a radar like design which is a bit of the human touch that resides in the design. 2. The health bar, here
the player can see the health status of the selected unit. The shape is a reference to the headpiece that the
aliens wear. 3. The currency, here the player can see the currency that he or she currently owns. The player
needs this currency to build new units. 4. The menu button, this is what the player uses to open the menu
options, pauze and close the game. 5. The Command box, this is where the player can see which units he or
she can build. And use to build the units. On the left are some alien type lights that adds to the alien feel of the
user interface. The spiked design of the user interface is based on the armor that the alien grow on their bodies.
It has a radar like design which is a bit of the human touch that resides in the design. 2. The health bar, here
the player can see the health status of the selected unit. The shape is a reference to the headpiece that the
aliens wear. 3. The currency, here the player can see the currency that he or she currently owns. The player
needs this currency to build new units. 4. The menu button, this is what the player uses to open the menu
options, pauze and close the game. 5. The Command box, this is where the player can see which units he or
she can build. And use to build the units. On the left are some alien type lights that adds to the alien feel of the
user interface. The spiked design of the user interface is based on the armor that the alien grow on their bodies.
Testing my design
So now we can apply the design rules to my UI design. To test how well my User Interface is designed accordingto the design rules, I made two surveys to test with actual humans. For this research I have chosen to use
surveys, because direct feedback from my target audience is the most useful in this situation. Since the goal of
the user interface is that it is user and human friendly. So for this test I would also recommend you guys using
a survey. Or something similar that gives you direct feedback from a human perspective.
My presumptions are that my current design might not be very practical or natural to use. I think that aesthetically
it might score better. But we will find out! The first survey contains four questions about the Learnability, Efficiency,
Errors and Satisfaction. Twelve people have participated in this survey, and the overall results are pretty negative.
But now we know what is wrong with my design.
Image 3 - Survey test results
The User Interface scored pretty low overall, but especially with learnability and Efficiency. The User Interface
is too big and takes up too much space on the screen.
User’s would find it difficult to click on units and navigate through the game. In the charts you can see that the
User Interface scored a little bit higher on the Error, Memorability and Satisfaction questions, but still pretty bad.
To test the memorability question, I asked the same twelve participants to fill in another survey a week later.
How well can you remember the User Interface?
To test the memorability question, I asked the same twelve participants to fill in another survey a week later.
How well can you remember the User Interface?
Image 4 - memorability survey
This question scored higher than the other ones. Same as before, I asked the participants why they gave it the
score they did. And the main feedback was that it looks so different from a regular user interface design, that it’s
pretty memorable. Since the focus is more on the aesthetic side, it looks very unique. In the survey the
participants told me that that made it more memorable. Honestly I can say that I have expected these results.
Since my design was purely based on aesthetics, it completely lacked in other aspects. Personally I would say
that the Satisfaction question scored pretty low because of the other questions. The feedback that the
participants gave made me think that the alien design was not the problem.
score they did. And the main feedback was that it looks so different from a regular user interface design, that it’s
pretty memorable. Since the focus is more on the aesthetic side, it looks very unique. In the survey the
participants told me that that made it more memorable. Honestly I can say that I have expected these results.
Since my design was purely based on aesthetics, it completely lacked in other aspects. Personally I would say
that the Satisfaction question scored pretty low because of the other questions. The feedback that the
participants gave made me think that the alien design was not the problem.
But although it’s an overall negative result, we can still use this and learn from this. So now that we know what is
wrong with this User Interface design, we are going to have a look at how other successful games apply these rules.
wrong with this User Interface design, we are going to have a look at how other successful games apply these rules.
Chapter 3: How do other games do it?
How do other Real Time Strategy games apply these design rules?
For step 3 we will be looking at the user interface design of Starcraft II, and for multiple reasons. It is one of the
most popular Real Time Strategy game, and it’s also recommended for novice RTS players. Which means that
the User Interface design should be easy and clear enough to be understood by beginning players. And that’s a
sign of good User Interface design. Besides that, it is also a real time strategy game with an science fiction
setting, which fits our alien design.
most popular Real Time Strategy game, and it’s also recommended for novice RTS players. Which means that
the User Interface design should be easy and clear enough to be understood by beginning players. And that’s a
sign of good User Interface design. Besides that, it is also a real time strategy game with an science fiction
setting, which fits our alien design.
Starcraft II is a good example of how Real Time Strategy UI should look like. To be easily understood and
satisfying to use. To analyze the Starcraft II UI, We are going to apply same 5 design rules to it. With this we will be
able to pinpoint the great differences between our Alien User Interface Design, and Starcraft II’s User Interface
design.
able to pinpoint the great differences between our Alien User Interface Design, and Starcraft II’s User Interface
design.
Image 5 - Starcraft II User Interface
Image no. 3 that you can see above, is a screenshot taken from Starcraft II. The User Interface is divided in five
sections. Section A is the area that shows the amount of resources. It shows the amount in numbers. Section B
shows the player the control groups. Most player’s will use this section to control their units. And also produce
units back in the base as well. Section C shows which units are selected and the qualities, quantities and status
of that unit. Section D shows the player how many control groups they have. Most players will use this section
to control their units in battle. Section E shows the player the mini map. Both the enemies and allies of the player
are visible in this section. The player can also use this feature to move units.
shows the player the control groups. Most player’s will use this section to control their units. And also produce
units back in the base as well. Section C shows which units are selected and the qualities, quantities and status
of that unit. Section D shows the player how many control groups they have. Most players will use this section
to control their units in battle. Section E shows the player the mini map. Both the enemies and allies of the player
are visible in this section. The player can also use this feature to move units.
So now we have good understanding of how the User Interface works from Starcraft II. Now we are going to apply
the five important design rules that we have tested with before. To test these design rules, I will be playing
Starcraft II for the first time. This way I will have an unbiased idea and immediate feedback of how easily a
novice player can use the User Interface.
Starcraft II for the first time. This way I will have an unbiased idea and immediate feedback of how easily a
novice player can use the User Interface.
Learnability: How easily can a new user navigate the interface? When I started up the game I first noticed that
all the information I need, cleary has their own area on the screen. The quick Macro information that I need,
I can quickly glance over. The mini map is very clear and the command box (section B) is very easy to use.
The command box only shows commands that I can actually use, so no unnecessary information there. Now I
will also take in consideration that it is a game recommended for novice players. Since “Blizzard’s game design
philosophy is: Easy to play, hard to master.” [8]
I can quickly glance over. The mini map is very clear and the command box (section B) is very easy to use.
The command box only shows commands that I can actually use, so no unnecessary information there. Now I
will also take in consideration that it is a game recommended for novice players. Since “Blizzard’s game design
philosophy is: Easy to play, hard to master.” [8]
Efficiency: How quickly can users perform tasks? All the player needs to control the game are on the screen.
Features like section B and D, are regularly used. These features have their own area on the screen and are
easily accessible by the player. There is no unnecessary information or menus on the screen. One of the few
bad features is that when you select a group of units in section C,and you click on a single unit, that unit will
leave the group. That is not clear in the User Interface and could use a bit more feedback.
easily accessible by the player. There is no unnecessary information or menus on the screen. One of the few
bad features is that when you select a group of units in section C,and you click on a single unit, that unit will
leave the group. That is not clear in the User Interface and could use a bit more feedback.
Memorability: If a user hasn’t visited the system in a while, how well will they remember the interface?
To test this, I haven’t played the game for a week, before playing again. Starcraft II’s in-game interface systems
always strive towards keeping functional elements universally designed. So it’s intuitive for the player. This way
I easily remembered how everything works when I haven’t visited the game for a week. I would say this interface
is very memorable.
always strive towards keeping functional elements universally designed. So it’s intuitive for the player. This way
I easily remembered how everything works when I haven’t visited the game for a week. I would say this interface
is very memorable.
Errors: how many errors do users make, and how quickly can they recover from errors? I can say that I as a
novice, haven’t made many mistakes. One of the few mistakes I made was accidentally clicking on the mini-map
and moving my units in the wrong direction. This however, is an error that you can quickly resolve. By clicking
next to the units in the game, you can easily cancel the previous movement command.
and moving my units in the wrong direction. This however, is an error that you can quickly resolve. By clicking
next to the units in the game, you can easily cancel the previous movement command.
The command box (section B) show’s only the commands that are available for that unit, so that cuts away a lot
of errors the player can make.
of errors the player can make.
Satisfaction: Do users enjoy using the interface, and are they pleased with the results? I can personally say
that I am pleased with the User Interface design. The efficiency of the UI is very accessible. And it’s very easy
to get used to. Personally as an artist, I would say that the User Interface is not aesthetically pleasing to me.
While it is very clear and accessible, it is not too attractive to the eyes. I would love to see a balance between
being accessible but also visually artistic.
to get used to. Personally as an artist, I would say that the User Interface is not aesthetically pleasing to me.
While it is very clear and accessible, it is not too attractive to the eyes. I would love to see a balance between
being accessible but also visually artistic.
The UI scored very high on learnability, memorability and errors. It is easy for a beginning player to learn how
to use this user interface. Since all the menus and interface have a consistent and clear design, with no
unnecessary information, it is also very memorable. This user interface design, is designed in a way that it
prevents the player from making too many errors. And when errors are made, they can easily be resolved due
to the accessibility of the user interface. The only downside of the user interface that I have found, was in
section C, where the player can see the units that are selected and the qualities, quantities and status of those
units. When you select a group of units and deselect one, it will leave the group. That’s the only part of the user
interface design that I thought needs to show a bit more feedback to the player. In the end we can say that this
User Interface is very user friendly and works very well for novice Real Time Strategy players.
unnecessary information, it is also very memorable. This user interface design, is designed in a way that it
prevents the player from making too many errors. And when errors are made, they can easily be resolved due
to the accessibility of the user interface. The only downside of the user interface that I have found, was in
section C, where the player can see the units that are selected and the qualities, quantities and status of those
units. When you select a group of units and deselect one, it will leave the group. That’s the only part of the user
interface design that I thought needs to show a bit more feedback to the player. In the end we can say that this
User Interface is very user friendly and works very well for novice Real Time Strategy players.
Chapter 4: Second Alien UI design
What do we need to change about my Alien User Interface design to make it human friendly?
Now we know how a successful Real Time Strategy game applies these design rules to their User Interface
design. In step 4 we are going to have a look at how my User Interface has to change, with the information we
gathered in step 3. If you have made your own User Interface, you can read along and apply these following steps
to your own UI design.
So what exactly do we need to change about my alien User Interface design? At step 2, I had taken a
survey. With every question, I also asked the participants why they scored the features as they did. To find out
why the question scored so low or high, and to know what exactly needs to change. So I’ve summarized the
feedback that I have gotten from the participants to break down what actually needs to change.
design. In step 4 we are going to have a look at how my User Interface has to change, with the information we
gathered in step 3. If you have made your own User Interface, you can read along and apply these following steps
to your own UI design.
So what exactly do we need to change about my alien User Interface design? At step 2, I had taken a
survey. With every question, I also asked the participants why they scored the features as they did. To find out
why the question scored so low or high, and to know what exactly needs to change. So I’ve summarized the
feedback that I have gotten from the participants to break down what actually needs to change.
Learnability: For Learnability was the overall result that the features didn’t look natural. It took them a long time
to understand what everything was or did. There was too much unnecessary information and details on the screen.
Efficiency: For Efficiency the biggest problem was the size of the user interface. It took up too much space of the
screen with unnecessary details. The command box was readable, but the placement and size were annoying.
Errors: The Errors scored a bit higher but was still not well received. Since the user interface is too big and take
up too much space of the screen, it’s easy for the player to click on wrong features. And it makes it difficult to
navigate the movement in the game, since they keep clicking on the UI. Other than that, it looks like the player
can’t make to many mistakes with this UI. This user interface has the problem solving like the starcraft II UI.
When you accidentally move a unit by clicking on the mini-map, you can click in game to stop that action.
Although with this user interface it is easier to accidentally move a unit.
navigate the movement in the game, since they keep clicking on the UI. Other than that, it looks like the player
can’t make to many mistakes with this UI. This user interface has the problem solving like the starcraft II UI.
When you accidentally move a unit by clicking on the mini-map, you can click in game to stop that action.
Although with this user interface it is easier to accidentally move a unit.
Satisfaction: Satisfaction also scored a little bit better than the rest. The main issue was the size and placement
of the features. But the participants recognized the aliens in the design and found it aesthetically pleasing.
The design of some of the features are a bit too alien according to the participants. Especially the menu button
and the health bar were confusing and hard to read.
The design of some of the features are a bit too alien according to the participants. Especially the menu button
and the health bar were confusing and hard to read.
For the memorability design rule I send the survey participants another survey exactly a week later.
Memorability: Memorability score pretty decent in the survey. Because it is an aesthetic user interface design
it’s pretty memorable. But since the user interface was hard to understand, it still was.
So now we know what needs to change. One of the main things that needs to change is the size of the features
and the placement. The current user interface takes up too much space. Some features like the health bar and
the menu button should really change in appearance. The challenge here is to keep the design alien but also
readable. And now to apply it to make a new alien user interface design.
and the placement. The current user interface takes up too much space. Some features like the health bar and
the menu button should really change in appearance. The challenge here is to keep the design alien but also
readable. And now to apply it to make a new alien user interface design.
Image 6 - The new UI design
Above you can see the new user interface design. The main thing that I have changed about the features, is that
they are smaller and less in the way of the player. I also removed a lot of unnecessary details and information
so that everything is easier to read.
No. 1 is the mini-map. Here the player can see the allies and enemies.
This feature can also be used by the player to move units. This feature is not smaller but is placed more in the
corner, so it takes up less screen space. I have kept the radar design, because there were no complaints about
the design and it works well.
they are smaller and less in the way of the player. I also removed a lot of unnecessary details and information
so that everything is easier to read.
No. 1 is the mini-map. Here the player can see the allies and enemies.
This feature can also be used by the player to move units. This feature is not smaller but is placed more in the
corner, so it takes up less screen space. I have kept the radar design, because there were no complaints about
the design and it works well.
No. 2 is the feature that shows the unit information. Here the player can select units and see their status. This
feature has been changed the most. The alien designed health bar has been moved to the side, and the unit
information can now be shown in the black box.
feature has been changed the most. The alien designed health bar has been moved to the side, and the unit
information can now be shown in the black box.
No. 3 shows the player the currency that the player owns. It has been moved to the upper right corner of the
screen. Since it is Macro information it should be easy to glance over when playing. Because it is in the corner
without a big bold border, it is not blocking a part of the player screen.
screen. Since it is Macro information it should be easy to glance over when playing. Because it is in the corner
without a big bold border, it is not blocking a part of the player screen.
No. 4 is the menu button. One thing I personally felt I had to compromise with. The alien symbol was just too
weird for human players to understand. So I accepted that this feature had to be recognizable and thus I have
changed it to an easy to recognize cogwheel.
weird for human players to understand. So I accepted that this feature had to be recognizable and thus I have
changed it to an easy to recognize cogwheel.
No. 5 is the command box. The command box shows the player the owned control groups. Most player’s will use
this section to control their units. This feature also changed in size and is placed closer to the corner. A lot of the
unnecessary aesthetic details have been removed as well.
this section to control their units. This feature also changed in size and is placed closer to the corner. A lot of the
unnecessary aesthetic details have been removed as well.
The overall look of the user interface is not a lot clearer. The user interface is less in the way of the gameplay
area, so it should be more satisfying to play with. I still managed to keep a little bit of the alien design in the
user interface, but the test results showed that that was less priority. Ultimately we want to design a user
interface that is actually user friendly of course. But my goal for this particular design is also the alien aspect.
I think that we have managed to achieve that with this second design, but to be sure we will have to put that to the
test.
area, so it should be more satisfying to play with. I still managed to keep a little bit of the alien design in the
user interface, but the test results showed that that was less priority. Ultimately we want to design a user
interface that is actually user friendly of course. But my goal for this particular design is also the alien aspect.
I think that we have managed to achieve that with this second design, but to be sure we will have to put that to the
test.
Chapter 5: Testing what we have learned.
Does our new Alien User Interface design apply the design rules correctly?
Now that we have changed our Alien Interaction design with the previous feedback and research, we are now
going to test if it uses all the design rules correctly. For my User Interface design I used the survey method again.
For testing a User Interface design, I prefer this method to get direct human feedback. So I would still advice you
guys to use this method, or a similar one that you might prefer.
going to test if it uses all the design rules correctly. For my User Interface design I used the survey method again.
For testing a User Interface design, I prefer this method to get direct human feedback. So I would still advice you
guys to use this method, or a similar one that you might prefer.
To test these design rules I have send out the same two survey as before to eleven new participants. These
participants have filled in this survey unbiased by the previous user interface design. The overall results of these
surveys is a lot better than the previous one as you can see in image 7 and 8. The same as in the previous
surveys, I have asked the participants the reasons behind their answers.
participants have filled in this survey unbiased by the previous user interface design. The overall results of these
surveys is a lot better than the previous one as you can see in image 7 and 8. The same as in the previous
surveys, I have asked the participants the reasons behind their answers.
Learnability: The participants, according to the survey, were pretty happy with the learnability. All the need
information is on the screen and there is no unnecessary information or details on the screen. The mini-map,
command box and unit information is recognizable and easy to use. Some participants still had the issue that
some features did not feel natural.
information is on the screen and there is no unnecessary information or details on the screen. The mini-map,
command box and unit information is recognizable and easy to use. Some participants still had the issue that
some features did not feel natural.
Efficiency: The efficiency also scored pretty good. Since the features are not in the way and have their own
space on the screen, it’s easy to oversee and use. Only the important gameplay information is on the screen.
That means that the player doesn't have to take unnecessary steps to smoothly play the game.
space on the screen, it’s easy to oversee and use. Only the important gameplay information is on the screen.
That means that the player doesn't have to take unnecessary steps to smoothly play the game.
Errors: The Errors scored pretty good again. According to the feedback the participants couldn't really find that
much that would cause errors during the gameplay.
much that would cause errors during the gameplay.
Satisfaction: The satisfaction was a lot better this time. In the feedback the participants said that the user
interface is not in the way of the play area. Aesthetically it look pleasing and they could see the similarities with
the aliens. One person did not like the alien aesthetics and prefers a simplistic design for a user interface.
interface is not in the way of the play area. Aesthetically it look pleasing and they could see the similarities with
the aliens. One person did not like the alien aesthetics and prefers a simplistic design for a user interface.
Image 8
For the memorability I send the participants a second survey exactly a week later. That’s how we can test the
memorability question the best.
Memorability: The memorability also scored pretty good this time. Participants said that the alien design of the
user interface really makes it stand out and thus more memorable. Since the features are placed like most Real
Time Strategy game, it feels more natural to use and easier to remember where every feature is.
Time Strategy game, it feels more natural to use and easier to remember where every feature is.
So all in all the second user interface design scored pretty good, and I can say that I am pleased with the test
results. One person did not like the alien design of the user interface, but since it’s only one person I take that
as personal preference. There will always be people that will not like my design, or the alien aesthetics. And
well, we all understand that you can never please everyone.
as personal preference. There will always be people that will not like my design, or the alien aesthetics. And
well, we all understand that you can never please everyone.
Conclusion
Conclusion
After designing our first alien User Interface design, finding the most important interface design rules, looking at
how Starcraft uses these design rules and making a new alien User Interface design, I think we can say that it’s
clear that all of the interaction design rules are very important. But then there is our main question.
how Starcraft uses these design rules and making a new alien User Interface design, I think we can say that it’s
clear that all of the interaction design rules are very important. But then there is our main question.
Which User Interface design rules can be broken when designing a User Interface that is designed by and
for aliens, but is still user friendly for humans?
I will say that no, you cannot break any of the design rules that we have used in our design. But that is because of
all the design rules that are out there, I have chosen the five most important and used ones. That means that yes,
these are the most important rules that you should not break when designing an user interface. Because designing
something that is meant to be interactive, should be easy and useable. That means however, that most of the other
design rules that have not made the top five, can be broken.
I will say that no, you cannot break any of the design rules that we have used in our design. But that is because of
all the design rules that are out there, I have chosen the five most important and used ones. That means that yes,
these are the most important rules that you should not break when designing an user interface. Because designing
something that is meant to be interactive, should be easy and useable. That means however, that most of the other
design rules that have not made the top five, can be broken.
During this tutorial we have found the five most important design rules. The ones that should not be broken.
Instead of trying to see which ones can be broken and which ones cannot. Eventually we can say that with this
tutorial, we have made a user friendly user interface that also fits an alien project very well. We now have a user
interface that has been tested and has been human approved, but is still an alien design. With these results I hope
this tutorial has been useful to you and that I may have teached you something along the way. But I hope that we
can say that we now know the design rules and guidelines that will help me and hopefully other artists in the future
when designing.
tutorial, we have made a user friendly user interface that also fits an alien project very well. We now have a user
interface that has been tested and has been human approved, but is still an alien design. With these results I hope
this tutorial has been useful to you and that I may have teached you something along the way. But I hope that we
can say that we now know the design rules and guidelines that will help me and hopefully other artists in the future
when designing.
If you are a game artist and you find it difficult to design user interfaces, you can follow these five design rules and
guidelines. I am sure that these will help you designing a user friendly user interface design. But if you wanna go
all out and maybe make an alien design like myself, maybe you should break some rules. As long as you keep
these five rules in check, you can experiment on breaking other rules and have fun with your design!
guidelines. I am sure that these will help you designing a user friendly user interface design. But if you wanna go
all out and maybe make an alien design like myself, maybe you should break some rules. As long as you keep
these five rules in check, you can experiment on breaking other rules and have fun with your design!
Abonneren op:
Posts (Atom)