7.1.2 “Create a Leader” Menu
7 User Interface
The interface elements were designed following the interface using mainly 2D elements. This decision was parameters pre-stablished by the Visual group. Our made due to a criteria of graphics rendering optimization. main goal was to design a light and comfortable UI. We have chosen to display the essential data making use The Hyprions interface was designed throughout the of a very simplified look, avoiding the use of long texts, following stages: extremely contrasting colors or heavy shapes. To do so - Initial sketches on conceptual discussions; we had designed elements using subtle transparency, - Setting a coherent visual unity; a restricted number of colour hue, simple iconographic - Layouts set up; system, light type faces and sound feedback.
- UI prototyping in flash app;
In this Menu the player finds the main four actions
- Usability testing;
executed by the Leader:
Although the game scenario and characters were designed - Last corrections on the usability test results;
- Build;
in 3D it was a decision made by the group to design the - Final layouts presentation.
- Destroy; - Attract; - Move;
7.1 User Interface Elements: 7.1.1 “Create a Leader”
7.1.3 The Destroy action
Menu When double clicking on
When clicking on the button “DESTROY” the player will visualize this icon when hovering buildings. The action is
any citizen, the player
accomplished when the player clicks over the chosen building. Such action will be followed by sound feedback and
might chose the option
building disappearing animation.
of creating “a leader” or “a leader +”. One certain amount of Biopoints will be consumed after this action is executed. This action is followed by a sound feedback and a subtle animation of the Biopoints panel takes place at this point.
16
author: Fernanda Dias
17
7.1.4 The Build Menu
7.1.5 The Move action
When clicking on the button “BUILD” the player will visualize the screen below. The info displayed are essential and
The player might move the leader in order to reach more citizens. When clicking on the button “MOVE” the player
summarized. That will help on the decision making executed by the player. It also delivers some of the educational
has a hover feedback as displayed below. When clicking in the desired area the leader will move being followed by
content implicit in the game play.
the citizens already inside the influence zone.
7.1.6 The Attract action
After choosing the desired building the player will hover areas [having a feedback where it is allowed to build this specific facility]. After clicking on the chosen area the following actions will take place: the building bar, the timer, the building area, the influence zone and influence area will turn visible.
The player might attract new citizens when in need of more supporters in a more drastic action. When clicking on the button “ATTRACT” the player has a hover feedback as displayed below. When clicking in the desired area the citizen placed in such place will move to vacant places inside the influence zone. [ ? IF the player clicks in one area far away from where the leader is, then the leader will automatically be moved to that area?] 18
author: Fernanda Dias
19
7.1.7 The Citizens Priorities
7.1.9 The Pulse
When the player clicks on a pre-determined button on the keyboard or joystick, he/she will visualize the citizens
The Pulse panel will display the events taking place during the game play. It might be used also in sound mode
priorities inside the building area. This visual resource helps the player to know who is already convinced, who is
when clicking on the “speaker� sign.
not and how good or bad the process of convincing citizens is developing.
In order to avoid overlapping the bars should be placed in one of the corners of the squared occupied by the
The voiced news resource might help to avoid a constant reading during the game play. That suits better for certain
citizen. Not necessarily always the same.
players and the resource might be activated or deactivated at any time by the player.
7.1.8 The Building bar and timer They were designed to help the player to visualize how the building process is taking place and how much time he has left to convince the sufficient number of citizens.
More relevant notifications, such as a Build Success and a Build Fail will also be displayed in Pulse, but will offer a special animation and sound feedback, in order to impact the player. Such events will also have animations on the floor [influence area blinks and timer background blinks].
20
author: Fernanda Dias
21
7.1.10 Green Buildings Info
7.1.12 Leaders
The info for the “Green Buildings” will be displayed when the player hover it. In case the player wants to visualize
Leaders will also be differentiated by their bodies colours.
more details, he has to click in “MORE”. Some of the educational content will be delivered in such info panels.
Green Leader
Leader +
7.1.11 Citizen’s Health The citizens health will be displayed according on its body colour. It will gradually change to black, which means the citizen is near to die by the pollution surrounding him.
22
author: Fernanda Dias
23