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.
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
abc
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.