Why Android?
T he Android OS is currently the most popular operating system in the world (Wallace 2017). The Android OS runs on almost everything, from smart phones to table tablets and TV. Therefore, it is not a bad idea to use this operating system to make a mobile phone application. In the market of various mobile apps in the app store, creating an app not only with an eye-catching user interface but also with a smooth user experience is not an easy job. This project includes how the mobile application “Logo Quiz World” is created from sketches to final product.
Research | Meet the users
What needed to be research?
- Ideas, name, logo, colors…
- Similar Android applications in the app store.
- Their design styles and logos
- Review and feedback in the app store
- The development range that I can complete
Tools & Software | Pick the right one
- Android Studio and Software Development Kit — the official integrated development environment (IDE) developed by Google.
- Adobe XD is a vector-based tool for designing, prototyping user experience templates for websites and mobile applications, creating simple interactive clicks through prototypes. The software is available for macOS, Windows, iOS and Android for free.
- Adobe Photoshop can help with presenting a mockup design for your customers.
Design Process
User Flow
Design is also about understanding your product inside out, its features and functionality, and designing while keeping the end-user in mind. (Harshita 2018). There are several steps to follow in the design process: create user-flow, wireframes, select color palettes, create mock-ups, create an animated app prototype. The first step in the design process is to find out the features you want in your application by using user flow diagrams. User flow should always tell a story.
Wireframe
Wireframe is a basic visual representation of the layout for the website or application interface. It will deserve the time you spend, saving a lot of time and effort for you and the project members. Wireframes bring many purposes besides being a rough sketch of your application. It can help developers see the location of the elements on the page. They provide their team members to quickly plan and validate the value of page or screen design before any major effort is made to design and build the same page. Since the goal of wireframing is focusing on the structure, not to visualizing details of the design so keep it simple. Wireframes are usually limited to monochromatic palettes, which rely on different gray tones to convey the difference, in which only boxes and lines represent copies, images and page’s elements… Images should not be used in wireframing to avoid distraction. It is usually represented by a rectangular box with an “X” inside. Typography is also not part of the wireframing process. You should only use one common font and still be able to change the font size to illustrate important titles and text.
There are 3 different types of wireframes and each can be useful, depending on the progress of the project. These terms: low, medium or high fidelity is used to classify the level of wireframe production. A lowfidelity wire frame is usually a quick, simple conceptual sketch made enough to help customers know the skeleton of the design. With their simplicity, they are quick and easy to change before the next design and development efforts take place. Below are the low-fidelity wireframes and high-fidelity wireframes of the application “Logo Quiz World”.
Mock-ups
The next formative stages of the UX design process is making the mock-ups. A mockup is usually a medium to high fidelity representation of the product’s appearance and demonstrates the basics of its functionality (Cao 2015). By looking at a mockup, you will get the closer look to what the final product will be. Although mockup seems to resemble the final design, it lacks the functionality of a prototype. However, mockup is a channel between wireframes and prototype.
Prototype
The final stage of the process is prototyping. Prototypes enable designers, clients, and test users to validate the usability and overall value of solution design — but in terms of design, they are still different from the final product itself, and this distinction is key (Lazarova 2018). Prototypes are clickable images and an effective way for designers to approve their work and test their design before changing from user experience design to user interface. In addition, these clickable images can allow customers or test groups to be able to test and provide feedback until the final product is completed.
ANDROID DEVELOPMENT
Android Studio
The first thing to do is to choose the right working environment to develop the programs. Android Software Development Kit is the answer for developers. There are many options for using, for example, Android Studio — the official integrated development environment (IDE) developed by Google, Unity and GameMaker: Studio. Android Studio is the official integrated development environment (IDE) for building recognized Android applications for the Google Play Store. Android Studio and Software Development Kit, which can be downloaded straight from Google, may need some power to run evenly. The tool needs to allow you to view and edit many different files, some of which operate in completely different ways (Sinicki 2018). Along with code editing features, Android Studio includes a simulation software to run applications as they work so that developers can do everything they need without leaving the environment. Android Studio is one of forceful tools for developing entirely useful and testing Android applications.
Android Virtual Devices (AVDs)
Another convenient feature of Android Studio is the Android Virtual Device (AVD). An AVD is an virtual machine running Android on an emulated set of device specifications, including memory, screen size, CPU, etc… (Alexander 2019). It will help developers test applications on a virtual device. There are many options that allow users to customize every form of device, such as Android version (regularly updated), memory, brand, screen size… Configure the virtual device you create, to model the typical features of the device in Android Emulator. In each configuration, you can specify the Android platform to run, hardware options and the emulation interface to use. Each AVD acts as a standalone device with separate storage for user data and SD cards.
Use Case Diagram
This diagram shows what happened at each stage of the application and how it works. Users have three different game modes to play (Food Quiz, Car Quiz, Social Media Quiz). After selecting a mode, the quiz will only show the quiz from that topic. For example: If the user selects the topic “Food Quiz”, only quizzes related to famous food or beverage chains such as Wendy, Mountain Dew will appear. On the other hand, if they don’t want to choose a specific topic, they just need to click directly on the “Play quiz” button, random quizzes from all topics will pop out. After answering the question, there will be a toast message showing “right” or “wrong” to the player. If the user clicks on the “How to play” button, the instruction screen is displayed. Moreover, if the user clicks to “Quit Game” button, the application will be killed.
Manifest Files
The manifest is always placed in the root directory of the application directory. It is an important file and every application cannot live without it. The AndroidManifest.xml file defines your application characteristics, theme, assets, activities, and permissions (Wallace 2017). The manifest file also contains some other important features, like Activity, Service, Receiver, Provider… Declaring an Activity (a subclass of Activity) implements an intuitive user interface of the application. Each activity must be represented by its own <Activity> element in the manifest. Any undeclared activity will not be seen by the system. Declaring a Service (a Service subclass) is one of the application components. Each Service must be represented by its own <service> element in the manifest. Any undeclared service will not be seen by the system. The BroadcastReceiver declaration (a subclass of BroadcastReceiver) is one of the components of the application. The ContentProvider (subclass ContentProvider) provides structured access to data managed by the application. Every ContentProvider that is part of the application must be represented by a <provider> element in the manifest.
GUI (Graphical User Interface)
The graphical user interface (GUI) is an important aspect of any application. The GUI is an interface that uses icons or other visual indicators to interact with electronic devices, instead of just text via a command line. The user selects one or a combination of these elements on the user interface by pressing keys on a keyboard, clicking with a mouse, or tapping on the screen. (Teske 2019). Each screen is designed with xml. It contains all the buttons to the important features embedded into the application. Every screen is designed with user friendly interface and colorful buttons. The Activity A below in the picture is for play randomly mode and made with linear layout (vertical). There will be the image of the logo (ImageView) above and gridViewAnswer and gridViewSuggest in the middle. Finally, there will be a submit button (btnSubmit) at the bottom of the screen.
Activites
An Activity object in Android contains a single UI focused on a specific task or feature that your application offers to the user (Wallace 2017). Almost all activities interact with the user, so the Activity class provides a window in which one can place one’s UI. An activity is created by 2 parts, an xml file that defines its interface and a Java file that contains the source code. The “Logo Quiz World” application has 6 activities. Therefore, there are 6 screens that are displayed to the user if needed. This is the first activity that users will see whenever they open the application. Each button seen in the main operation is a feature of the application. It consists of the main menu with a list of application features that users can access.
Array Adapters
ArrayAdapter is a basic Adapter and is usually used in Android. Adapter is the link between the UI component and the data source that helps us fill in the UI component. It holds the data and sends data to the adapter view, then the view can retrieve the data from the adapter view and display the data on different views such as Listview and Gridview. This is where you process your menu item selections in your Activity’s options menu, by using the .getItemId() method from the Adapter class (object) that is used to process lists (Wallace 2017).
Drawable Files
In Android Studio, whenever you need to display static images in your application, you can use the Drawable class and its subclasses to draw shapes and images. The standard work process to define an Android multi-state ImageButton UI element is to utilize an XML Drawable definition file, which will use a <selector> parent tag and be located in the /res/drawable folder (Wallace 2017). Drawable resources are a common concept for a graphic that can be drawn on the screen and you can approach them by APIs like getDrawable (int) or apply to another XML resource with attributes like android: drawable and android: icon.
TESTING | See how it works
Genymotion
Testing is carried out along with coding using Android emulator and Android devices. After completing the coding for this application and fixing all possible errors, it is ready for final testing. Java objects make debugging easier, because you can add or remove them modularly, or isolate them during testing in order to ascertain where bugs are located within the overall code (Wallace 2017). There will be testing with virtual emulators (Genymotion) and real Android mobile devices. Genymotion is an easy-to-use Android emulator, created to help developers test their products in a safe, virtual environment. Genymotion has essential virtualization requirements. It works by establish a virtual machine through VirtualBox to give an Android emulator that supports hardware sensors like GPS, accelerometer and battery.
Result Of Implementation
When developing any Android application, the project contains apk. files can be transferred in mobile devices running on Android. The files are extracted by phone when the application get installed. This project has been tested also on Samsung J3 (2016). The main page, game mode page and instruction page worked perfectly as expected as shown in the image below. New users can easily select any feature of the application without any problems. There will be a notification of a toast message pop up whenever the user clicks the submit button. It will show the user the correct answer or say: “Ops! Please try again” when the answer is wrong.
CONCLUSIONS
The idea of “Logo Quiz World” is to entertain and provide knowledge to users. “Logo Quiz World” is not only tested on virtual emulators but also Android mobile devices. The goal has been met, users can play the game smoothly. The application runs well and the user interface is friendly and lively as expected. The size of the test and the buttons vary slightly when installing on a mobile device. The structure of this thesis is assessed with the important results of the test that were performed on Android mobile phones. This application is designed for basic purposes although it can be developed for more complex tasks. There are a few improvements that can be made to upgrade this app, for example: view score rankings, view current scores and review questions.
Behance link of the product: https://www.behance.net/gallery/66145087/LOGO-QUIZ-WORLD-%28UI-AND-REAL-CODING%29
REFERENCES
Wallace, 2017. Android Apps for Absolute Beginners. Accessed: 20th July 2019.
Lim, 2018. How To Use Photoshop Mockups: Five Simple Steps. Available: https://www.howdesign.com/creative-freelancer-blog/how-to-use-photoshop-mockups-five-simplesteps/.Accessed: 21th July 2019.
Alexander, 2018. The biggest WTF in design right now. Available: https://uxdesign.cc/the-biggestwtf-in-design-right-now-87139f367d66. Accessed: 21th July 2019.
Vincent, 2017. Wireframe vs Mockup vs Prototype & Selection of Prototyping Tools. Available: https://www.mockplus.com/blog/post/wireframe-mockup-prototype-selection-of-prototyping-tools. Accessed: 22th July 2019.
Cao 2015. The What, Why, and How of Mockups. Available: https://designmodo.com/mockups/. Accessed: 28th July 2019.
Wallace, J. 2013. Learn Android App Development. Accessed: 19th August 2019.
