Download - Honeycomb User Interface Design @iRajLal
![Page 1: Honeycomb User Interface Design @iRajLal](https://reader033.vdocuments.us/reader033/viewer/2022052900/555ada1fd8b42a024a8b4ed2/html5/thumbnails/1.jpg)
For touch screen mobile devices
Honeycomb Design
Rajesh Lal
![Page 2: Honeycomb User Interface Design @iRajLal](https://reader033.vdocuments.us/reader033/viewer/2022052900/555ada1fd8b42a024a8b4ed2/html5/thumbnails/2.jpg)
Honeycomb Design
Basis of the Design
Benefits
Interaction
Target Devices
Agenda
![Page 3: Honeycomb User Interface Design @iRajLal](https://reader033.vdocuments.us/reader033/viewer/2022052900/555ada1fd8b42a024a8b4ed2/html5/thumbnails/3.jpg)
Honeycomb Design
– Mesh of Honeycombs
– One hexagon for one App
Honeycomb Design
![Page 4: Honeycomb User Interface Design @iRajLal](https://reader033.vdocuments.us/reader033/viewer/2022052900/555ada1fd8b42a024a8b4ed2/html5/thumbnails/4.jpg)
Basis of Design
Honeycomb conjecture proofs that
Hexagonal tiling provides the least-perimeter way to enclose infinitely many unit areas.
Honeycomb Design
![Page 5: Honeycomb User Interface Design @iRajLal](https://reader033.vdocuments.us/reader033/viewer/2022052900/555ada1fd8b42a024a8b4ed2/html5/thumbnails/5.jpg)
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
![Page 6: Honeycomb User Interface Design @iRajLal](https://reader033.vdocuments.us/reader033/viewer/2022052900/555ada1fd8b42a024a8b4ed2/html5/thumbnails/6.jpg)
Provides optimum space for individual apps
Benefits
<- Honeycomb design 19 Apps
-> IPhone Square design
20 Apps
![Page 7: Honeycomb User Interface Design @iRajLal](https://reader033.vdocuments.us/reader033/viewer/2022052900/555ada1fd8b42a024a8b4ed2/html5/thumbnails/7.jpg)
Variety of Customization option
Benefits
![Page 8: Honeycomb User Interface Design @iRajLal](https://reader033.vdocuments.us/reader033/viewer/2022052900/555ada1fd8b42a024a8b4ed2/html5/thumbnails/8.jpg)
Best Suited for Finger interaction particularly thumb interaction
Benefits
![Page 9: Honeycomb User Interface Design @iRajLal](https://reader033.vdocuments.us/reader033/viewer/2022052900/555ada1fd8b42a024a8b4ed2/html5/thumbnails/9.jpg)
Consistency in User Interface
Benefits
Consistent - Central view - Main Apps View (Lower bottom – Left Image) - Custom Setting View (Right Image)
![Page 10: Honeycomb User Interface Design @iRajLal](https://reader033.vdocuments.us/reader033/viewer/2022052900/555ada1fd8b42a024a8b4ed2/html5/thumbnails/10.jpg)
Right handed, Left Handed & Landscape
Benefits
Left Handed Landscape mode Right Handed
![Page 11: Honeycomb User Interface Design @iRajLal](https://reader033.vdocuments.us/reader033/viewer/2022052900/555ada1fd8b42a024a8b4ed2/html5/thumbnails/11.jpg)
Honeycomb Design
Interaction
– Settings Screen
– Swap individual Apps
– Title / Updates
– Border & Color
– List Tiles
![Page 12: Honeycomb User Interface Design @iRajLal](https://reader033.vdocuments.us/reader033/viewer/2022052900/555ada1fd8b42a024a8b4ed2/html5/thumbnails/12.jpg)
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
![Page 13: Honeycomb User Interface Design @iRajLal](https://reader033.vdocuments.us/reader033/viewer/2022052900/555ada1fd8b42a024a8b4ed2/html5/thumbnails/13.jpg)
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)
![Page 14: Honeycomb User Interface Design @iRajLal](https://reader033.vdocuments.us/reader033/viewer/2022052900/555ada1fd8b42a024a8b4ed2/html5/thumbnails/14.jpg)
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)
![Page 15: Honeycomb User Interface Design @iRajLal](https://reader033.vdocuments.us/reader033/viewer/2022052900/555ada1fd8b42a024a8b4ed2/html5/thumbnails/15.jpg)
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
![Page 16: Honeycomb User Interface Design @iRajLal](https://reader033.vdocuments.us/reader033/viewer/2022052900/555ada1fd8b42a024a8b4ed2/html5/thumbnails/16.jpg)
Interaction
List Tiles All the Tiles can be listed in
horizontal as well as vertical list view
![Page 17: Honeycomb User Interface Design @iRajLal](https://reader033.vdocuments.us/reader033/viewer/2022052900/555ada1fd8b42a024a8b4ed2/html5/thumbnails/17.jpg)
Target Touch Screen Devices
Honeycomb Design
Flip Pones Mobile Internet device PDA/ Pocket PC Smart Phones
![Page 18: Honeycomb User Interface Design @iRajLal](https://reader033.vdocuments.us/reader033/viewer/2022052900/555ada1fd8b42a024a8b4ed2/html5/thumbnails/18.jpg)
Thank You
Rajesh Lal Senior UI/UX Engineer