N Screens problem with HTML5: W3C Conference Redmond, Nov 15,2011 @iRajLal
Honeycomb User Interface Design @iRajLal
18
For touch screen mobile devices Honeycomb Design Rajesh Lal
-
Upload
raj-lal -
Category
Technology
-
view
9.404 -
download
2
description
A User Interface for Mobile device inspired by Honeycomb structure with Hexagonal Grid Here are the links to the two design patents: http://www.google.com/patents?id=ltXKAAAAEBAJ http://www.google.com/patents/about?id=wOfUAAAAEBAJ
Transcript of Honeycomb User Interface Design @iRajLal
For touch screen mobile devices
Honeycomb Design
Rajesh Lal
Honeycomb Design
Basis of the Design
Benefits
Interaction
Target Devices
Agenda
Honeycomb Design
– Mesh of Honeycombs
– One hexagon for one App
Honeycomb Design
Basis of Design
Honeycomb conjecture proofs that
Hexagonal tiling provides the least-perimeter way to enclose infinitely many unit areas.
Honeycomb Design
Benefits – Optimum space for individual apps – Variety of customization option – Best suited for thumb interaction – Provides consistency in User Interface – Suited for Right handed, Left Handed and
Landscape interaction
Honeycomb Design
Provides optimum space for individual apps
Benefits
<- Honeycomb design 19 Apps
-> IPhone Square design
20 Apps
Variety of Customization option
Benefits
Best Suited for Finger interaction particularly thumb interaction
Benefits
Consistency in User Interface
Benefits
Consistent - Central view - Main Apps View (Lower bottom – Left Image) - Custom Setting View (Right Image)
Right handed, Left Handed & Landscape
Benefits
Left Handed Landscape mode Right Handed
Honeycomb Design
Interaction
– Settings Screen
– Swap individual Apps
– Title / Updates
– Border & Color
– List Tiles
Interaction
Customize Settings Screen
6,10,11,12,15,16,17, 33,35,37,38 and 39 active
Tap on a hexagon to Change the state - Active - In Active - Ready Ready State Icon can be swaped
Interaction
Swap Hexagons
Tap on a hexagon to change the state - Active - In Active - Ready Ready State Icon can be swaped with other Ready item (10 and 17 shows two ready items)
Interaction
Title / Update On Touch the top half of the
hexagon will show the title
Bottom half will show the updates
If only top half of the hexagon is visible show the Title as shown in the figure (music and video)
Interaction
Border & Color The border width of Hexagons can
be customized (Picture shows border gap size of 10 pixels)
Border color can also be customized
Interaction
List Tiles All the Tiles can be listed in
horizontal as well as vertical list view
Target Touch Screen Devices
Honeycomb Design
Flip Pones Mobile Internet device PDA/ Pocket PC Smart Phones
Thank You
Rajesh Lal Senior UI/UX Engineer
