Forums » Design, UX/I »

UX Prototype

Added by carriestiens almost 5 years ago

Hello! Version 1 of the InformaCam prototype can be viewed here: https://carriewinfrey.proto.io/share/?id=98fe5ac8-5cde-478e-b203-41a0e7b951c1&v=1

Naturally with the app, there will be a lot of switching between landscape and portrait mode. Proto.io has some funny ways of dealing with this. So, it will probably make the most sense to view this version in the browser. (Once the prototype is a bit more robust, it will flow better on the phone.)

Here are the instructions for viewing this version of the prototype in your browser:

1. Camera mode (rapid fire capture of photo or video)
*could add a confirm and annotate/share, or return to camera screen, to make taking one photo/video then annotating and sharing easier. Though, this would take away from staying in the camera mode to capture.

rotate screen / change orientation (the button for this is in the bottom right corner)
The actual action in the app, will be to hit the back button on the phone
*can we add ay buttons to the camera mode?

2. Gallery
Tap the check mark to go into selection mode—here you would select the photos that you want to share or delete
Tap the check mark again to cancel

tap on the third image (assume this image has already had some notes added to it)

3. View Image
See meta info for the image, can add a quick text or audio note.
If there are already tags on the image, they will show here; you can tap on a target/tag to see it's notes.

rotate screen / change orientation to go into landscape mode
*need a way to go to the add tags screen in addition to rotate
*can you only add tags in landscape mode?

4. Annotate image
This is a mockup for photo, video will differ
*are there additional actions for video (tween, etc.)

tap on the girl closest in the photo
tap to add a quick note
tap IBA notes for the organization form

tap the fullscreen icon (in the top right corner)
this deselects tags, and selects the whole photo / frame; you can pinch and zoom here

Note: The annotation screen is meant to be scrollable. When the whole image is selected, meta notes are shown below. When a tag is selected the menu pops up. If quick notes or IBA notes are selected, for example, the page would automatically scroll to show the notes.

tap anywhere to show action bar
'up' button takes you to the home screen (with the gallery)


Replies (6)

UX Prototype, Version 3 - Added by carriestiens almost 5 years ago

Review version 3: https://carriewinfrey.proto.io/share/?id=98fe5ac8-5cde-478e-b203-41a0e7b951c1&v=3

Additions since the last version
Style:
- Consistent visual style; See the style guide in files: https://dev.guardianproject.info/projects/informacam/files
- Updated icons

Gallery:
- Added the filter dropdown for the gallery view

Single Image View:
- Added quick note interface, and initial audio note screen
- Changed 'share' button in the action bar
- Added long/lat and time to meta info
- Updated the tag guide (how to add a new tag), and added the option to turn on your phone's auto-rotate within the app

Profile
- Added Panic action to the profile page
- Initial additions to the profile page (organizations list and sample notifications)

Coming up Next
- Mockups for Video
- Form UI, specifying keyboards and movement through a form
- Style the add/modify tag widget in the fullscreen mode (on the side)
- Finish audio note

UX Prototype, Version 4 - Added by carriestiens almost 5 years ago

https://carriewinfrey.proto.io/share/?id=98fe5ac8-5cde-478e-b203-41a0e7b951c1&v=4

Additions include:
- Video views have been integrated. (I'm going to work with the styling of the video player next week to simplify it a bit more.)
- Form UI documentation can be found in files https://dev.guardianproject.info/projects/informacam/files form_field_UX.pdf
- Add/Modify tag widget styled
- Audio notes screens included

I'm headed to Austin this morning!
Cheers, Carrie

RE: UX Prototype - Added by carriestiens almost 5 years ago

Drum roll, please... Here's Version 5: https://carriewinfrey.proto.io/share/?id=98fe5ac8-5cde-478e-b203-41a0e7b951c1&v=5

Additions:
- Styling of video views
- Styling of tags in the portrait image view changed to match landscape view
- Login/Get In start screen
- Sketched idea for a simple setup

Happy weekending! Hit me up with any questions. Harlo, I believe in you!

RE: UX Prototype - Added by carriestiens over 4 years ago

Version 7 can be found here: https://carriewinfrey.proto.io/share/?id=98fe5ac8-5cde-478e-b203-41a0e7b951c1&v=7

Additions:
- Audio recorder for voice notes

(1-6/6)