UI and UX Design
#Gamer-Net User Interface and User Experience This page includes a description of our project's user interface and intended user experience.
Carlos and Ben
Gamer-Net will be a continuously growing network of friends connecting with friends with like interests, specifically games, whether they are video, table top, cards, and more. The design will be implemented in a web interface in a manner that is simple, clean, and easy to navigate. There are slightly different experiences for guests and registered members. Guests will be able to see games in play, check out the general site, and explore just enough to see the value in becoming a member. Registered users will enjoy the full experience of the Gamer-Net network from connecting with friends, personalization and customization, and game and location searching.
The landing page will be a welcome page for the platform as a whole. This landing page's primary goal is to inform newcomers about the platform and encourage them sign up. The landing page for logged-in users is their profile page, which is described in the User Page section.
The following picture presents a first sketch of the welcome page for a user who has yet to log in.
The login interface will be the portal between general guest browsing and a registered member's social experience. A potential member logging in will be presented with fields, prompting for username and password. In order to check credentials, error messages and flags will be presented if input is incorrect/does not match an entry within our database (that username+password combination does not exist). After successful login, a user will be taken to his/her dashboard, where main interaction with Gamer-Net and its users will take place.
If the user is not currently a member, they can become a member through the following page.
The main part of users' experience will come from interaction with the dashboard, whether it is a player's own or a [potential] friend/other user.
The user will be able to look for new friends based off general location, alias, or games played. The page currently looks like the following:
A logged user will be able to click the array of friend pictures displayed in their profile page. Doing so will lead them to a friends page. The friends page will provide a complete list of their connections/friends and larger pictures for these friends. This page will be developed according to the implementation of further elements in the table of contacts in the database.
The user interface of a user who has successfully logged in will display top bar menu that will list several options. Each of these options is a link to each of the following items:
- Logo/Home Button
- Settings
- Search
- Logout
The logo present in the top bar will be clickable and allow logged users to go back to their profile page, which is also the landing page after successfully logging in. Users that are not logged into an account can click the logo/home button in order to go back to the welcome page.
The settings option of the menu will allow users to configure items of their profile page and even delete their profile.
The user interface design described in the User Interface is modelled in order to provide a specific user experience. In particular, the welcome page and the ability to navigate the site without having signed up for the service is intended to encourage sign up and create an inviting atmosphere for our platform. Bare-minimum interfaces whose complexity is hidden through changes of webpage (asynchronous calls) are intended to ease the learning curve of our site. Simple color schemes are intended to create a feeling of friendliness and help ease of use. Moreover, the goal is to achieve a user interface that requires no extra documentation or explanations. The user page is intended to provide the most important about a user in a quick manner. Some personalization, beyond selecting a profile picture and population information fields, will be allowed through the settings menu.
- Other personalization features
- Customizable location find radius range
- Change between predefined themes
- Picture/avatar modification