OFFICIAL BLOG ARTICLE 4: IMPLEMENTATION AND UI-DESIGN
Hey there and welcome back to our project process blog. This time we are going to discuss the implementation and the design for the user-interface section of our time tracking application. Firstly, we are going to start with the implementation, to clarify our choice considering the IDE and programming language:
Implementation - Coding Conventions
Before we are able to start with the programming section of this project, we have to determine the particular coding conventions to ensure an efficient collaboration. To do so, we decided to apply, basically, the default coding conventions from java ( Java Coding Conventions) and furthermore add some additional rules:
1. Limited Function-Length
- reuse of the function
- splits program into several sub-steps
- keep variable namespace clean
- facilitates the debugging process
2. Function-Description
- Guarantee a detailed function description.
- facilitates the understanding for foreign programmers
- increases the clarity of the total program
3. Single-Line-Comments
- facilitates the process of "comment something out"
UI-Design: Context of Use
In this case, the user James Bond wants to use our App "MY TIME" to see where he is wasting his precious time waiting for orders and missions so that he can put his time to good use and also show the time wasted to his superiors and make them work faster and give orders sooner.
He can add different categories like Mission time, Time wasted, Time for background check on the Mission and Vaction between Missions.
In this case, the user Bruce Banner, being a nuclear physicist and also an avenger when he turns to "The HULK", wants to measure the time he spent being as the hulk since he has no recollection of that phase so that he can monitor his change and also control his future turnings to hulk by analysing the data of the activity monitor
So, He creates simple categories like time spent as Bruce, and Time spent as hulk. Since the app supports the customization of categories, this is possible.
UI-Design: Mockup
After drawing up a basic paper-prototype, we created a handsome click-prototype, which you can out try yourself here.
You can try it yourself by clicking on the link and following the below instructions.
- Once you land on the page with mock mobile following the link above, click on the icon in the bottom of the screen which resembles a clock, which is our app icon.
- The next will be screen which asks for a PIN.
- Enter any one number and click on 'NEXT' at the bottom of the page. Our prototype here is designed to show the working of the in and the error message when the pin is entered wrong. So, irrespective of the pin entered, it displays a error message. Now click on any number again and click next.
- The follwing screen is the next sceen which is pretty much empty since this is the first time you are logging in. Click on the "+" button at the right bottom of the screen to add an activity.
- You can save the activity after entering it or cancel without saving to go to the home page.
- There is the "settings" option to set pin, add category etc on the top and the oveview button at the left bottom in case you want to see the statistics of the activity recorded so far in graphical form.
Also, below are the sequential screens of the app prototype which can be seen clicking on the link.
App Icon
The app icon is at the bottom, When clicked, it opens and a PIN entry is prompted if pin is enabled in the settings.
PIN Entry
A numberpad with blanks for PIN is displayed on the screen where you can input the PIN.
Error Message incase of wrong PIN
The above error message is generated when the entered PIN is incorrect.
Home Page
If the PIN entered is correct, the homescreen is displayed. If the user is signing in for the first time, the screen displayed is blank, else an overview of day or week or month is displayed based on the settings the user chose for the display.
Add Activity
The activity can be added in the chosen category, subcaterory as desired by the user with the dates and times and then the data can be saved or cancelled by using the buttons at the bootom of the screen.
Activity Saved
After the user enters the activity to be recorded and save the activity, a screen with default summary of the activity is displayed.This can be changed by sliding the screeens to the left or right on the screen so that the user can get the summary in the format required.
Activity Details
The details of the activity like activity name, date, timespan, description of the activity can be viewd by clicking on he activity sector on the graph.
OverView As Required
The overview can be adjusted to display daily, weekly , monthly or yearly activities recorded as per the user's choice.
Categories
There are some predefined categories present in the app but also the user can add new categories and add or delete categories as per requirements.
Pie Chart
A prototype of the pie chart overview in the app.
Bar Chart
A prototype of bar chart overview in the app
Hopefully, you enjoyed reading our blog article, so be excited of our next one.
Your myTimeTrackers Team