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
Nächste SlideShare
Wird geladen in …5
×

Honeycomb User Interface Design @iRajLal

13.478 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie, Business
3 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Great idea. Its something I've thought about before but never went that far into.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Get my book on User Interface design guidelines and best practices here http://www.designuserinterface.com/
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • 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
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
Keine Downloads
Aufrufe
Aufrufe insgesamt
13.478
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
8.124
Aktionen
Geteilt
0
Downloads
61
Kommentare
3
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×