Skip to content
Christy Madden edited this page Dec 5, 2016 · 14 revisions

Introduction

This wiki is used to show users how to use some of the features of the app in more detail. It will also describe some of the development of the project such as, how the project was managed throughout development.

Main Page

The image below shows the first page you encounter when you open up the application. It's the page where the user will spend the most time if not all their time. There are 3 main parts to it, on the left, there is the menu (red area) and to the right, there is the area where the images are used to communicate. The blue area is the display for the images that are loaded onto the app and the green area is the communication bar where the user drags the images to communicate his or her wants and needs. When the display area has too many images to show on a single page, the user can scroll or swipe to the left and these will show the other images. The size of the images and the labels also adjust to the size of the screen depending on whether the app is being used on a phone, tablet or desktop computer.

Home Screen

Drag & Drop

To move an image from the display to the communication requires the user to press down on the image and this will allow them to then drag the image. If the image is dragged over the communication bar and then released, the image will be dropped into the communication bar. When more than one image is in the communication bar the newest image added will be placed to the right side of the current images. To remove the images from the communication bar you can simply drag and drop them back into the display.

Drag & Drop

Accessing the Menu

This is an important part of the application as it provides ways to add images to the app. To stop the children who are using the app to accidentally edit or delete images or settings, there is a pin code needed to allow access to the menu. To bring up the pin code box users need to press the "Hamburger Button" at the top of the menu section. The pin code will be displayed in the box and can be changed in the settings if the children are learning how to unlock the menu.

Pin code box

Buttons in Menu

When the correct pin code has been entered, the user then gains access to the applications other functionality. As you can see below there are 5 buttons providing different functionality.

  1. The first button opens the file explorer of the device and from here you can select an image that is currently already stored on the device. Selecting an image will then bring the user to a new page where they can choose to give the picture a label and save it or they can discard it if the image is not what they want
  2. The next button below will open up the device's default web browser. From there the user can download images they want to add to the application.
  3. The third button will open the device's camera. The user can take a picture and if they choose to accept it, they will be brought to the page in the application where they can save or discard the image.
  4. The fourth button allows the user to toggle on or off the edit mode. If edit mode is enabled then the user can double tap any image in the display and they will open a new page where they can update the label or delete the image.
  5. The last button will bring the user the settings page. Here the user can change the pin code or change the number of images that can be dropped into the communication bar (must be between 2 and 4 images).

Menu bar buttons

This image shows the Edit button being enabled which in turn allows the user to Double Tap the image they want to edit.

Edit Page

After the user has doubled tapped an image in edit mode they will be brought to a new page. This page allows the user to update the label the image has or delete the image completely.

Edit Page

Localisation

An extra feature which would not be apparent is that the application has been localised in English and German. Every piece of text in the application has been localised and below you can see an example of the edit page in German.

German Localisation

Other Points

There is validation on all text boxes and some have different rules to others. If the user does not meet the rule then red text will appear prompting the user about the problem.