Structure and Design of the User Interface

After the architecture of the app, we thought about the structure and the design of the user interface. We broke down the functionality to four key parts of the app:

  1. Home screen - should display all tasks.
  2. New task screen - create a new tasks
  3. Edit task screen - change the values of an existing task
  4. Map screen - Let the user pick a location for a task

Home Screen

The main problem with the home screen was the design of the tasks. We thought about many different solutions to handle the tasks in a way that the user can recognise immediately which ones are due soon and which ones are due later in time. There where ideas like representing tasks as balloons which grow bigger with shorter due times or circles which are “filled with liquid” and when you check them, they leek the liquid. The problem with ideas like that were, that the space on a smartphone is to limited. So to create something like the balloons would mean that the user would have to scroll a lot, which is a bad user experience. So in the end we decided to go with a more conservative design persisting of bars which fill from left to right. 

Because the home screen is also the center of the app the user should be able to do as much as possible directly from there. Which means the user should be able to create and delete tasks, check them and get an overview of all the existing tasks. All of this functionality is build right in our design. Illustrated in the image:



Add Task Screen

The next screen was the add task screen. The functionality is clear. This screen must give the user the ability to create a tasks and tweak all the parameters he wants to. The parameters can be derived from the architecture where the tasks was defined. So there needs to be the possibility to change the name, the start and end date, the timespan as well as the location. 

Additionally it’s necessary to let the user choose how the task should behave when it’s marked as done. There are two possibilities, it can be reset and the next countdown is set to the time of completion plus the countdown time the user chose for his task, or it can be reset and the next countdown time will be the next date which is calculated from the start date plus X times the timespan until the newly calculated date is in the future. 


For now there is a switcher to choose between the two. For the first possibility there is the “Start new after tap” switch, and for the second possibility there ist the “Start new in time” switch. The problem is in our opinion that this isn’t clear to the user without explanation, so we are still searching for something better here. Furthermore, the user can set the location reminder to obtain a push notification if he is in a certain radius from the task-location. This radius can be modified by the user, too.

Edit Task Screen

The edit screen in our case does nothing special, which the add screen doesn’t do as well. So far simplicity reasons we decided to take the same screen to edit a task. But when a task was chosen to be changed, the values are preset to does saved in the task.

Map Screen

When the user sets the location reminder, another view - the Map Screen - will appear. For realizing this map view, we decided to use the MapKit Framework of iOS for our project.

After detecting the current user location, the map view will be automatically zoomed into it. In the Map Screen the user has two options to set a location. One is to place a pin with a longpress gesture on the map view. If  the user perhaps just knows the address of a location, he can enter this to the given edittext-field on the bottom of the screen. In this case the pin will automatically set on the right location. For every task the user can determine just one corresponding location. In the following figure the preliminary design of the map Screen is shown. With the check-button the location will be saved in the Core Data Database and appears as a thumbnail under the “Set Location reminder”-switch of the prior Add Task Screen.




Rate this blog entry:
First steps with Microsoft Kinect v2
Driving a stepper motor with our Arduino

Related Posts



No comments made yet. Be the first to submit a comment
Already Registered? Login Here
Sunday, 23 September 2018

Captcha Image