Tuesday, April 14, 2015

If Apple Designed An iOS User Interface For Kids

Editor’s note: Eric Elia is managing director of Cainkade, a full-service product design and development studio.
YouTube Kids was low-hanging fruit for Google. Based on both the number of reviews and the high rating in the App Store thus far, the app will be a hit. It scratches the parental screen-time itch — how to put a device into your kids’ hands without risk of it being overused or exposing the kids to the seedy side of YouTube.
This joins well-done user interface facades like Amazon’s Kindle FreeTime and the character-centric Netflix kids menu on many devices. YouTube Kids’ visual and interaction design is solid. Borrowed ideas, like the access timer (thanks Amazon) are well-implemented. But there are limitations.
On iOS, there are only so many controls that a developer can put into its app. For example, there’s no way, in software, to prevent a child from pressing the home button and jumping into another app or game.
This got us thinking about what we’d like to see in an official Apple Kids implementation for iOS — something that would not impact developers at all but would empower parents with tools to better help them manage how long kids use devices and how they can use those devices. As parents, we believe in the value that supervised access to technology can provide. We just want a little help with metering that time. Sometimes daddy just needs to finish getting dinner on the table.
The Cainkade creative team did a great job of synthesizing the concept and fleshing out an experience that fits elegantly into the overall style of iOS 8. The key features we considered were:
  • Limited access to certain apps that parents curate
  • Time-limited access to that collection of apps
  • No easy way to toggle out of the Kids mode
  • A clear identified app icon on the home screen
  • Multiple kid profiles / preferences
Our design goals were to:
  • Respect the design language of iOS as much as possible with some variation when appropriate in kids mode.
  • Minimize variation as much as possible from global conventions.
  • Minimize clicks and interaction points that require parent intervention when in kids mode.
  • Optimize for what we feel is the most common use case. A parent hands over a phone or tablet, and the child touches the icon that they know is theirs.
  • We used iPhone as the concept device, but our approach would also support iPad.
Home screen
Icons on the home screen shown below represent three different kids’ profiles – Len, Nicky and Sarah. Icons can be customized with an image or color. Parents can add apps by dragging any icon on top of the kids’ icon, which is actually folder that contains other apps.
app_0000

Kid home screen
Sarah’s apps are accessible using normal conventions. The wallpaper of her home screen can be customized in Settings.
app_0001
App behavior
No changes within app usage, Toca Hair Salon 2 (below) is pristine. But after a preset time limit has elapsed….
app_0002
Source: Toca Hair Salon 2

Time limits
A friendly traffic light tells the child that the time is up. The messaging uses graphics as a signal for pre-readers, as opposed to a standard text-heavy dialog box. Default time limits are set globally.
app_0003
Extend the time limit?
Quick access to extend usage by convenient button press. We placed both the time selection and the default pass code on the same screen for convenience. It’s the parents’ responsibility to keep the code private if they choose.
app_0004
Home screen No. 2
Wallpaper has been customized with this fella’s cute mug. Let’s say his sister likes one of these apps as well.
app_0005
“Sharing” apps
iOS currently doesn’t allow for aliases or shortcuts for an app to live in two different places. But in a profile-limited kid mode, there needs to be a way for multiple users to access the same app.
This is a slightly hidden feature, but something that is kid-accessible. We went back and forth on whether this should be accessible in kids mode, or something that lived in Settings. We could be convinced otherwise, but felt it best to leverage standard drag-and-drop behavior and have all app management functions in the same place. By putting the sharing feature here it solved several problems at once.
A parent or kid can hold down an icon, and it starts to wiggle, as app icons do. An additional press makes the icon draggable down to the bottom row to other profiles.
app_0006
Sharing options
When you drag the icon into the bottom row, there’s an option to move it entirely, or duplicate it.
app_0007
Duplicates
If you try to copy an app to a profile that already has the app, there’s a simple error message.
app_0009
Settings
A goal here was to utilize global Settings as much as possible, in the same way that Privacy or Notification behaviors can be managed centrally, and leveraged individually by developers. Note the three kids’ profiles toward the bottom of this screen.
app_0010
Customization
The main settings screen lets you edit the name, wallpaper and app icon, and default time limit for the child. If you choose a color or texture, the child’s first initial is used on the wallpaper and icon.
app_0011
Wallpaper
Choose a picture for the child’s home screen wallpaper.
app_0012
Or perhaps a color or texture.
app_0013
Colors can be customized for a texture using filter-style choices. We thought this was an area where we could have a little fun within the iOS 8 interface restrictions.
app_0014
The finished effect.
app_0015
Time limits
Standard time selection and sound alerts are included.
app_0016
This was a fun little palate cleanser of a little exercise for our team. We’d be delighted to see these ideas inspire our friends across the Bay in future versions of iOS. The designs are free to be used or leveraged in any way under a Creative Commons Attribution 4.0 International License. We are also comfortable with the Beerware license Cheers.
Disqus Comments