-
Notifications
You must be signed in to change notification settings - Fork 5
Design
Follow the Apple guidelines as much as possible and insofar available. This should give usage familiarity to the user of the app. This also means that the standard viewcontrollers offered by Apple will be used.
The app will using autolayout, so that it can be viewed on any size, landscape or portrait. In principle no specific designs for specific size classes will be used.
An exception is the popover, which only available on the iPad and needs special work to adapt to smaller size classes.
The app is based around the idea of modes: a view-mode and an edit-mode. In view-mode the user can see all the details of a product. In edit-mode the user can change all the fields of a product, adding images and selecting images. A disadvantage of this approach is that it puts an extra step for adding images. Hoever it is clearer what a user can do.
The relation between screens is defined in the Storyboard and uses standard Apple view controllers.
At the top-level is a master/detail viewcontroller. The master will present the list (or lists if we move to a tabController) of products. The detail will show an individual product, based on the selection of a product in the master. This design will morph into a navigation controller on an iPhone.
The master and detail contain a dummy navigation controller, which allows to add a navigation bars to the view controllers. No functionality is added on this level.
The navigation controller embedded in the master controller contains a dynamic tableview controller with custom cells. This navigation bar is for either application specific actions (preferences) or actions involving the list of products (adding by scanning). If the user pulls down the tableview a search bar will be presented, where he can type a barcode. If the barcode is not available on OFF, an alert is presented. The alert allows the user to create a new product on OFF, which the user can define by editing the fields. An idea is to embed this in a tabViewController, with a tab for different product lists.
The preferences are set in a static tableview controller. It allows the user to set or change some items:
- show salt or sodium
- show data in joules or kcalories
- delete the history
- setup his OFF user account
- setup warnings for allergens
The info of a product has been divided into separate pages. The user can switch the pages by swiping left-right. The pageview controller is also the place where the navigation buttons are implemented. These buttons are actios on the product that is currently visible.
When the pageview controller is shown on a small size class device, the navigation bar will show a back button (to the products tvc).
Each page is a dynamic tableViewController with custom cells. The custom cells are mostly filled with standard interface elements. If a cell contains an image, one can tap a disclosure to see the image in a new viewcontroller.
There are several interface elements, where a special approach is used.
A tag is one or more words belonging together. A tag can be translated into another language. In view-mode a tag is shown as a separate element. In edit-mode a tag can be deleted and created as separate elements.
The user can add new images, either from the photo library, or the camera. For this the standard Apple UIImagePicker library is used. Once an image is available, the user can select the part of the image, that must be uploaded. Image are uploaded into three categories: front-, ingredients-, nutrition-image.
Several product-fields (ingredient origin, producer location, store location) contain geographic data. Using the apple geograhic interface (TBD), the tagged fields are transformed into a geographic location.