Implementation & UI Design

19 Jun 2018

The Bananaquits

Logo


Introduction


Implementation

This phase the user tested system and interaction designs and implementation them into working systems and ready to go live.

User Interface Design

The goal of user interface design is to make users interaction as simple and efficient as possible in terms of accomplishing user goals. The design process must balance technical functionality and visual elements to create a system that is not only operational but also usable and adaptable to changing user needs.

Logo

Here,We are going to discuss about: Coding conventions, Context of Use, Design Solution, Summary of Changes

(By Pooja)


Coding Conventions


Coding Conventions are a set of rules for a specific programming language that recommend programming style,practices and methods for each aspect of a program written in that language. In our project,We are following the coding standards where we have mixture of Java and our own conventions.
Code conventions are important to programmers for a number of reasons:
*40%–80% of the lifetime cost of a piece of software goes to maintenance.
*Hardly any software is maintained for its whole life by the original author.
*Code conventions improve the readability of the software, allowing engineers to understand new code more quickly and thoroughly.
*If you ship your source code as a product, you need to make sure it is as well packaged and clean as any other product you create.

Common code conventions which we are using in our application design:

1.Comment conventions: The purpose of using Comments in code to make it easier for human to understand.
Example:
Logo

2.Indent style conventions: An indentation style is a convention governing the indentation of blocks of code to convey program structure.
Logo

3.Naming conventions:
Logo

4.Programming practices:

Logo

We discussed with our team memebers about coding standards and everyone is aware of how it has to be documented and shared.So, that everyone can follow the standards. Code is rechecked by one of our teammate when coding is completed. It has to be done because quality of code should be maintained.

(By Pooja)


Context of Use


Here,We are showing two profiles of our application users. How well they can use the application.

Logo

Logo

(By Avanthi)


Design Solution


Mockups are particularly used in the early development phases of software engineering. They support the determination of the user interface requirements in cooperation with clients and users. Mockups are usually a pure skeleton of the software controls without additional functionality. Often there is no programming, instead, the creation takes place in an image editing program. We were using the Vector-Programm “Create”, an App for the Apple Ipad, to create the following 6 Mockup-Sites:

The Main-Menu an the Site to add new Birds:
LogoLogohandes off

If the User open the app he will see at first the Main-Menu. Here he can choose wich step he would like to do next. He can decide between “Add a new Record” by clicking the big round Button in the middle of the screen. Or he would like to “See all Records” by clicking the Button in the lower left corner. Also he can “Change Settings” by clicking the button in the lower right corner. The last option is to “See the map” by clicking the button wich looks like the earth.

On the Site where the user can create a new Bird-Record are several textfields and dropdown lists to add different charactaristics. The date will be filled out automatically. It is possible to add a picture from the phone gallery of the user or make a new picture with the phone camera by clicking the integrated Buttons under the empty picture field. Besides it is possible that the user can add the location of the bird by himself or automatically by clicking the “Add-location-Button”. At the end the user can save the records by clicking the “Save-Button” in the upper right corner. After saving the new entry, the user will be handes off to the Overview of his Bird-Records.

The Overview of the Records and the Detail-Site of one particular Reccord:
LogoLogo

On the Overview-Site the user can see in a scrollable list all Birds wich he had recorded. He also can search for a special record or filter the entrys. If the user like to see more details of a special Bird entry he can click on one of the fragments and then he will be handed off to the Detail-Site. Here the user can see all the information of the choosen Bird. He can also delete or edit the entry.

The Settings and the Map:
LogoLogo

At the Setting-Site the user can decide if the app is allowed to acces to the gallery/camera or the GPS of the phone.

On the Map-Site the user will be able to see all the locations of the recording birds. With the filter function he can also decide of wich birds the location will be displayed. And the search field allows the user to search for a special bird location.

(By Viviane)


Summary of Changes


During the last sprints we did some changes to improve the usability of the application.

For a better clarity, another view has been added:
The Detail-View
In the “Overview” the user can see 3 attributes of a recorded bird and in the Detail-View more information are displayed. In the following you can see the changes in the behavioral- and the class-diagram.

Class diagram:

Logo

Behavioral diagram:

Logo

(By Anna)



Layout & Design by Pooja