Final Milestone Mobile User interface User experience ‐ User Manuel

User Interface/User Experience

Home Page

Source code

Search Page

Source code

Forum Page

Source code

Create Post Page

Source code

Post Page

Source code

Other related codes:

• Card widget source code
• Report widget source code
• Update widget source code

Games Page

Source code

Create Game Page

Source code

Game Page

Source code

LFGs Page

Source code

Create/Update LFG Page

Source code

LFG Page

Source code

Profile Page

Source code

Admin Panel Page

Source code

Game Approve Page

Source code

Post Reports Page

Source code

User Manuel

Signing In

• 1 -> Username must be not selected.
• 2 -> Email must be valid address.
• 3 -> Password must have at least 8 characters. Password should contain at least one upper case. Password should contain at least one digit.
• 4 -> Confirm password must match with password.
• 5 -> Click to submit register form.

Login

• Credentials must be true.
• Click submit to login.

Home Page

• 1 -> Search Bar: Search page can be opened from this section.
• 2 -> Recommended Games: Recommended games based on the user shown here.
• 3 -> Recommended Posts: Recommended posts based on the user shown here.
• 4 -> Recommended LFGs: Recommended lfgs(looking for groups) based on the user shown here.

Search Page

• 1 -> Search Bar: Search query should be written here.
• 2-3 -> Context selection dropdown: Context of the search can be selected from here.
• 4 -> Search result: Search result will be shown here(posts, games and lfgs seperately).

Forum Page

• 1 -> Post Card: Some content of the post shown here. It redirects to post page on click.
• 2 -> Create post button: Redirects to create post page. Only shown to logged in users.
• 3 -> Filter posts button: Opens the filter widget on the second page.
• 4 -> Filter widget: Posts can be filtered based on a game(game should be selected and apply button should be clicked).

Post Create

• 1 -> Title input section: Title of the post should be entered here(must).
• 2 -> Description input section: Description of the post should be entered here(must).
• 3 -> Game selection dropdown: Related game of the post can be selected from here(must). Selection must be made between already created games.
• 4 -> Category selection dropdown: Category of the post can be selected from here(must).
• 5 -> Tags input section: Tags for the post can be entered from here(not must). Any string can be entered as tag.

Post Page

• 1 -> Profile Information Section: Some information(name, image) about the owner of the post shown here. Redirects to profile page on click.
• 2 -> Title Section: Title of the post shown here.
• 3 -> Category Section: Category of the post shown here.
• 4 -> More Options Dropdown: More options dropdown shown here. Opens the dropdown in the second page on click.
• 5 -> Description Section: Description of the post shown here.
• 6 -> Tags Section: Tags of the post shown here.
• 7 -> Social Section: Social information about the post(comment count, like-dislike count) shown here. Post can be liked or disliked from this section.
• 8 -> Add New Comment Section: New comment to the post can be entered from here.
• 9 -> Post Edit Section: Post content can be edited from here(only shown to the owner).
• 10 -> Post Delete Section: Post can be deleted from here(only shown to the owner).
• 11 -> Go to Game Page Section: Redirects to the related game page on click.
• If not owner, report section also shown on the dropdown.

Comment Card

• 1 -> Comment Card: Similar to post card(profile section, like, dislike, more options section).
• 2 -> Comment more options dropdown: Similar to post dropdown(edit, delete, report). Only difference is comment can also be replied.
• 3 -> Reply Section: When some comment is replied, this section shown inside the comment card.

Profile Page(own profile)

• 1 -> Profile Image: Change profil image
• 2 -> Visibility: Change visibility of profile page.
• 3 -> Change Profile Information: Change Title and Company.
• 4 -> Add Tags: Add tags to profile page.
• 5 -> About Me: Edit your profile description.
• 6 -> Created Post: Created posts by user shown. Redirects to post page on click.
• 7 -> Liked Post: Liked posts by user shown. Redirects to post page on click.
• Games: Games rated 4 or above by user shown. Redirects to game page on click.

Profile Page(other's profile)

• 1 -> Follow/Unfollow: Follow/unfollow user

Lfg List Page

• 1 -> Lfg Card: Title of lfg shown. Redirects to Lfg page on click.
• 2 -> Change View Button: Change grid view of page.
• 3 -> Create Lfg Button: Redirects to Create Lfg page on click. If user is guest redirect to Login page on click

Create Lfg

• 1 -> Lfg Information: Fill title, description, platform, language, Mic/Cam requirement, group size, game and tags(optional) information to create lfg.
• 2 -> Create Button: Click to create lfg. To see the lfg after creating click on logo on appbar.

Lfg Page

• 1 -> Lfg Information: See title, description, platform, language, Mic/Cam requirement, group size, game, tags, post owner and creation date
• 2 -> Join/Leave button: Join/leave group
• 3 -> Members button: Members of group shown
• 4 -> Comment: Comment to Lfg post
• 5 -> Update Lfg: Update Lfg information. If you are not owner of post it doesn't let you update

Game List Page

• 1 -> Game Card: Title and image of game shown. Redirects to Game page on click.
• 2 -> Change View Button: Change grid view of page.
• 3 -> Create Game Button: Redirects to Create Game page on click. If user is guest redirect to Login page on click

Create game page

• 1 -> Game Information: Fill title, description, genre, platforms, player number, release year, universe, mechanic and playtime information to create game.
• 2 -> Choose Image: Choose image for game from image picker.
• Create Button: Click to create game. Admin must approve after creation.

Game page

• 1 -> Rating: Rate game. Rating will be updated after reopening page
• 2-3 -> Information: Information about game
• 4 -> Character: See characters of the game. Click plus button to create character
• 5 -> Similar games: See similar games of this game. Click to redirect similar game's page
• 6 -> Related Post: See posts connected to this game. Redirects to post page on click.
• 7 -> Related Lfg: See lfgs connected to this game. Redirects to post page on click.

Admin Page

• 1 -> Drawer: Click admin panel on the drawer after logged as admin
• 2 -> Game Card: Title and image of game shown. Redirects to Game page on click.
• 3 -> Reports Tab: Reports to post shown in this tab.

Admin Game Page

• 1 -> Information: Created game information
• 2 -> Approve Button: Click to approve creation of game.
• 3 -> Reject Button: Click to reject creation of game.

Admin Post Page

• 1 -> Report Message and Post Information
• 2 -> Cancel Button: Click to cancel report.
• 3 -> Delete Button: Click to delete reported post.
• 4 -> Ban User Button: Click to ban owner user of reported post.

Annotations

• 1 -> Report Message and Post Information
• 2 -> Cancel Button: Click to cancel report.
• 3 -> Delete Button: Click to delete reported post.

• 1 -> Report Message and Post Information
• 2 -> Cancel Button: Click to cancel report.
• 3 -> Delete Button: Click to delete reported post.