Summary
Revised Screens for Smart Quiz 1
Revised Screens for Smart Quiz Project
Screen 1: Welcome screen
The below screen is the first screen users sees when the application is launched. It has a welcome banner, fields to enter login credentials for existing users, login button and a button for new user registration which directs user to sign up or registration screen. The functionality of the screen is to test the registered user’s login credentials and allow the user to access the application
Screen 2: User Registration Screen
The second screen below is launched when user clicks on register button, which has two buttons which allows user to sign up to the application using there Google or Facebook accounts. User has a choice to choose which account they want to use. The functionality of the screen is to register the user and provide login credentials to application.
Screen 3: Preferences Selection Screen
The preferences selection screen allows user to select their preferred category in which they are interested. User can select their preferences at the time of registration and it also to change their preferences in the future use also. The functionality of the screen is that user will get more questions from their preferred category.
Screen 4: Quiz mode Selection
The below screen has 4 major buttons which allows the user to play the game in different modes. The quiz is available in modes like individual, challenge, league and daily mission.
The functionality of the screen is to allow the user to select the type of game mode user is willing to launch. And the screen also different common buttons at the bottom like settings, home and messages which provides ease of navigation to users through the application.
%3CmxGraphModel%3E%3Croot%3E%3CmxCell%20id%3D%220%22%2F%3E%3CmxCell%20id%3D%221%22%20parent%3D%220%22%2F%3E%3CmxCell%20id%3D%222%22%20value%3D%22%26lt%3Bh3%26gt%3B%26lt%3Bfont%20face%3D%26quot%3BComic%20Sans%20MS%26quot%3B%20color%3D%26quot%3B%23ffb570%26quot%3B%26gt%3BPlay%20Now%26lt%3B%2Ffont%26gt%3B%26lt%3B%2Fh3%26gt%3B%22%20style%3D%22labelPosition%3Dcenter%3BverticalLabelPosition%3Dmiddle%3Balign%3Dcenter%3Bhtml%3D1%3Bshape%3Dmxgraph.basic.shaded_button%3Bdx%3D10%3BfillColor%3D%23E6E6E6%3BstrokeColor%3Dnone%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22420%22%20y%3D%22647%22%20width%3D%22160%22%20height%3D%2243%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3C%2Froot%3E%3C%2FmxGraphModel%3E
Screen 5: User Turn in league
The below screen provides the information of whose current turn is to play in league mode of the game, users in the league mode takes turns one after other to play. It has information about both user and other participant’s information. It also has a button to remind or poke other user, when waiting for others to complete their turn.
Screen 6: Challenge mode
This screen is seen in the challenge mode of the quiz, user spins the wheel which will automatically select a category for the challenge between two users. The screen has a wheel with different categories, pointer and a spin button. The screen also provides information about the users participating the game at the top. The functionality of the screen is when user clicks spin button, the wheel spins and stops randomly at a category and game is launched.
Screen 7: Quiz Main Screen
The below screen is the games main screen, which is launched when the quiz starts, it has question highlighted the top, followed by four different clickable buttons which are possible answers and a countdown timer at the right top of the screen. The functionality of the screen is user has to select a correct answer form the 4 options provided with in the countdown time.
Screen 8: Result Screen:
The below screen is the result screen which appears when the user selects an option for the question in the previous screen. It provides the information if the selected option is right or wrong, button to continue to next question, share button, report button if user feels it as a wrong decision and also feedback buttons.
References
Arhipova, A. (n.d.). Mobile UI Design:Basic Types of Screens. Retrieved November 1, 2019, from https://tubikstudio.com/mobile-ui-design-15-basic-types-of-screens/.
Etermax. (n.d.). Trivia Crack. Retrieved from https://www.triviacrack.com/.