Honeycomb DesignFor touch screen mobile devices                      Rajesh Lal
Agenda   Honeycomb Design   Basis of the Design   Benefits   Interaction   Target Devices
Honeycomb Design Honeycomb Design  – Mesh of Honeycombs  – One hexagon for one App
Honeycomb DesignBasis of Design Honeycomb conjecture proofs that     Hexagonal tiling provides the least-perimeter way   ...
Honeycomb Design Benefits  –   Optimum space for individual apps  –   Variety of customization option  –   Best suited fo...
BenefitsProvides optimum space for individual apps             <-             Honeycomb design             19 Apps        ...
BenefitsVariety of Customization option
BenefitsBest Suited for Finger interaction particularly  thumb interaction
BenefitsConsistency in User Interface                                Consistent                                - Central v...
BenefitsRight handed, Left Handed & LandscapeLeft Handed   Landscape mode   Right Handed
Honeycomb Design Interaction   – Settings Screen   – Swap individual Apps   – Title / Updates   – Border & Color   – List...
Interaction Customize Settings Screen   6,10,11,12,15,16,17, 33,35,37,38 and 39 active                                  ...
Interaction Swap Hexagons                  Tap on a hexagon to change the state                   - Active               ...
Interaction Title / Update   On Touch the top half of the    hexagon will show the title   Bottom half will show the up...
Interaction Border & Color   The border width of Hexagons can    be customized (Picture shows    border gap size of 10 p...
Interaction List Tiles    All the Tiles can be listed in     horizontal as well as vertical list     view
Honeycomb DesignTarget Touch Screen DevicesFlip Pones   Mobile Internet device   PDA/ Pocket PC   Smart Phones
Thank You            Rajesh Lal            Senior UI/UX Engineer
Prochain SlideShare
Chargement dans…5
×

Honeycomb User Interface Design @iRajLal

13 651 vues

Publié le

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

Publié dans : Technologie, Business

Honeycomb User Interface Design @iRajLal

  1. 1. Honeycomb DesignFor touch screen mobile devices Rajesh Lal
  2. 2. Agenda Honeycomb Design Basis of the Design Benefits Interaction Target Devices
  3. 3. Honeycomb Design Honeycomb Design – Mesh of Honeycombs – One hexagon for one App
  4. 4. Honeycomb DesignBasis of Design Honeycomb conjecture proofs that Hexagonal tiling provides the least-perimeter way to enclose infinitely many unit areas.
  5. 5. 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
  6. 6. BenefitsProvides optimum space for individual apps <- Honeycomb design 19 Apps -> IPhone Square design 20 Apps
  7. 7. BenefitsVariety of Customization option
  8. 8. BenefitsBest Suited for Finger interaction particularly thumb interaction
  9. 9. BenefitsConsistency in User Interface Consistent - Central view - Main Apps View (Lower bottom – Left Image) - Custom Setting View (Right Image)
  10. 10. BenefitsRight handed, Left Handed & LandscapeLeft Handed Landscape mode Right Handed
  11. 11. Honeycomb Design Interaction – Settings Screen – Swap individual Apps – Title / Updates – Border & Color – List Tiles
  12. 12. 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
  13. 13. 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)
  14. 14. 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)
  15. 15. 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
  16. 16. Interaction List Tiles  All the Tiles can be listed in horizontal as well as vertical list view
  17. 17. Honeycomb DesignTarget Touch Screen DevicesFlip Pones Mobile Internet device PDA/ Pocket PC Smart Phones
  18. 18. Thank You Rajesh Lal Senior UI/UX Engineer

×