Storyboards
Goal 1: Challenging other members in the vicinity
Goal 2: Collecting medals and prizes
Goal 3: Registering in gyms via application
Interaction Metaphors
Pins:
Our application will deal with maps, it will locate a target location or it will locate your current location. In real life people usually then to use the pin to mark the important cities or location in the map as it is shown in the photo, some of them use markers to mark the locations, but using marker will be difficult to erase or even to give an accurate result, so we decided to use a pin to locate the user location for instance.
Cards:
The main purpose of the card is to display a small set of data in an organized way, that is easy to scan and give a clue about the organization or the person, for instance, the personal card will give little information about the person but enough to create a general view about him. We metaphorized the same concept of cards in our application to display the information about gyms in an organized way.
Text Fields:
In reality, when we register in a gym, for instance, we will be given a piece of paper with many fields to fill with our name, age …etc. In our application, we stimulated and copied the same concept of filling the fields with the proper information such as first name, last name …etc.
Radar Circles:
Radars are used to locate physical objects within a given
area, it shows the number of the objects within a specific diameter as well as
keep tracking these objects. We borrowed and applied the same idea in our
application, the colored circles will appear on the map in order to show
the most active area, their colors will give a hint to users so they can know
if it is crowded or not and once the user selects a circle more details will be
given to him.
Voice call and Camera Icons:
These two metaphors are very familiar to the users and can
be understood without any complexity, the hand telephone icon metaphor real
world object that used for communication, years ago telephones were very
popular and used by all the people around the world to communicate with each
other all that they have to do is just to write the number and pick up the hand
telephone, the same idea applied here based on user prior knowledge they
already that hand telephone is used to communicate with people via voice, the same idea is applied to the camera icon, once the user sees the icon it easy to
him to link it with the real-world elements which in our case the camera.
Cup icon:
In competition, the most common rewards are usually cups, for For instance the world cup, the cup icon reflects the same meaning in our
interface, the icon design itself describes its meaning and it also gives the same feeling of winning.
Steps Icon:
Since the application
will count the number of users steps
automatically, attaching the number of steps with this icon will give the user
a clear message about what this number means for instance if we put 4332 beside
this icon, usually the user will link the number with the steps that he has
walked.
Interface Design
Sign in/ Sign up/ edit profile
Your health summary/ Fave Gyms/ Achievment/ Friends list
Finding Sport Areas
Prize collecting *like Pokémon go
Rest and summary screens
Justification of the design
1- Strive for consistency:
The layout of the SportMap program emphasizes the consistency of the program in order to prevent confusion among users due to using various colors, shortcuts, and buttons. For example, as shown in the photo, in the event that the user needs to make changes to his records, he has two pages, one of which is to update basic information, such as name and email, and the other to update his health information, such as weight and height. Despite the disparity between the two pages, yet they have the same consistency in terms of color and icons.
2- Offer informative feedback:
This rule allows the consumer to realize what he's doing right now, by showing them a message or a sign that indicates that. To give an example of this rule and its existence in the program, when the user clicks on one of the suggested users to add them, the program changes the user's icon into blue in the box that lists the user's details and in the suggested users' bar to determine which users have been selected.
3- Design dialogue to yield closure:
This rule displays a message or an alert to the user to notify him or her of the completion of a particular task in the program. In the SportMap sports program, the app sends a notification and sends a congrats note to the user in the event that he or she received a new reward for the accomplishment of a particular mission.
4- Offer simple error handling:
5- Permit easy reversal of actions:
Almost all of the program pages have a back button at the top left corner of the page. When the user clicks this button, it returns to the previous tab, which is normally the home page.
6- Support internal locus of control:
A message
box will appear when the user clicks on Search for Sports areas to
obtain the user's permission to use his/her location to
Search for locations near him/her. In this scenario, the user may agree to
allow the software to enter his location after reading the message and may
revoke it if he does not want to do so, although this may contribute to his
failure to use the feature.
7- Law of proximity:
This rule means that rather than elements far from each other, the user looks at elements nearer to each other as being connected to each other. When the summary report is displayed in the SportMap, we can see that we have two elements near each other at the bottom, which are the number of calories burned and the distance traveled. On the other hand, we have the number of steps a little further from the calories and distance due to the less connection they have in comparison with the connection between the two elements.
0 comments:
Post a Comment