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