ChildFeed - GR2 - D1

Design 1: Adaptive Direct Manipulation UI

The General approach of this design is to provide an interface that adapts to different form factors (by adapting to different screen sizes), allowing the pages to be used and feel ‘native’ on workstations, laptops, and mobile devices. The design will also feature direct manipulation through mouse, touch, etc., in an effort to make different aspects of the UI, especially with regards to data entry and visualization, easier to use and understand.

General Design

Before we get to the storyboard, the general concept of this design needs to be explained. ChildFeed will have two separate (though possibly consistent) UIs that face two different user groups. The first is the UI facing the daycare worker, allowing said worker to share pictures and stories, and status reports of different children in the daycare. The second is the UI facing the parent or guardian, where the child’s status, stories, and pictures can be viewed through a feed.

Design Principles

The design aims to be learnable by being conversational. Most section headings and labels will be informal and conversational, making it clear to the user what is being asked for. For instance, the "drop off" screen that daycare workers use to show which children were dropped off or picked up to the daycare is headed with "Who's here?". Similarly, when a daycare worker wishes to share a story about a child, simple and conversational language is used: the heading is "Share a Story" (not 'status', 'item', 'feed update', etc.), and button labels are simple: "Who?" "What?", etc.

Affordances

Some affordances of the design are also not visible in these low-cost, low-fidelity design sketches. Some clickable items will prompt the mouse to change cursor, and some editable text will appear in soft rectangles and trigger a mouse cursor change on hover. I attempt to communciate other affordances, such as checkboxes, buttons, etc., however these can only portray their true function once implemented in a higher-fidelity prototype.

Daycare Worker's UI

The daycare worker’s UI framework is shown above. The different parts of the storyboard will go through the box labeled “content” in the illustration shown above. In the UI, we will be able to navigate through different parts of the web app through multiple levels.

As you can see, the app is scalable and the same “content” box is available to be viewed on screens of different sizes and fidelities. Depending on the size and fidelity of the screen, we can have one of the three interfaces shown above. Notice that, for the most part, the design of the “content” region is the same. Some minor adjustments, however, such as changing the number of objects tiled per row, etc., will be made from size to size to ensure that the design is usable on all form factors.

Child Selection

One of the main UI elements that will be used in this design is the Child Selection component. This is sometimes a page on its own (i.e. is displayed in the "content" portion of the above UI), buts sometimes appears as a modal or popup. This element allows different children to be selected for one purpose or another. The example used above shows how this component will be used to specify who is here and who isn't. I will be explaining how this ties to the storyboard later.

The tiling seen in the image above is also representative of how information will be displayed in this design, from the daycare worker's perspective.

Parent's UI

The parent’s UI is shown above. Here, we can see the main aspects of the interface. The feed takes the center stage in the parent UI and most aspects of the storyboard will revolve around the feed. Notifications appear at the top of the page in larger screens and the feed's density changes with screen size. The high-fidelity version shows the entire story in the feed, but with a small image thumbnail that can be enlarged by clicking on the image to view a bigger version. The medium-fidelity version shows a more concise feed with smaller thumbnails, that expand into the full story when tapped on, on the side of the screen. This includes a larger image and the complete text. The low-fidelity version shows a similarly-concise feed with small thumbnails, also expanding to the full story when tapped on, but on a different page.

Contrary to the daycare worker's perspective, the parent's view has more emphasis on feed entries, laid out in rows, as opposed to tiles of children. This is because the experience of the parent is focused entirely on the child he is caring for.

Notice that a parent can have more than one child that he or she can look at, and this is achievable by clicking on the name of the child or the "V" arrow next to it.

Storyboard:

Analysis:

Learnability:

Efficiency:

Safety: