×
Namespaces

Variants
Actions
(Difference between revisions)

Fisheye List

From Nokia Developer Wiki
Jump to: navigation, search
Rahulsingh1m (Talk | contribs)
(New page: Category:Mobile_Design Category:Mobile_Design_Patterns ===Description=== The term fisheye originates from a camera lens, having more detail in the center of the image and less det...)
 
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(11 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[Category:Mobile_Design]]
+
{{ArticleMetaData <!-- v1.1 -->
[[Category:Mobile_Design_Patterns]]
+
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090621
 +
|author= [[User:Rahulsingh1m]]
 +
}}
  
===Description===
+
[[Category:Mobile Design Patterns]]
The term fisheye originates from a camera lens, having more detail in the center of the image and less detail on the edges. In a fisheye user interface, the item in focus grows and the non-focus items remain unchanged.<br/>
+
A true fisheye list interface would have one item in the middle of the screen, with 2-3 lines of data, a two-line item listing above and below, and all other item having a single line.
+
  
===Use when===
+
==Description==
Use this to show a snapshot of the complete information. For example showing the cricket score in 2-3 lines. User can select the list item to explore further.
+
  
===Design Tips===
+
The term fisheye originates from a camera lens, having more detail in the center of the image and less detail on the edges. In a fisheye user interface, the item in focus grows and the non-focus items remain unchanged. A true fisheye list interface would have one item in the middle of the screen, with 2-3 lines of data, a two-line item listing above and below, and all other item having a single line. This thus allows the user to be able to get more content for the item in focus which otherwise might have been missed out with normal view.<br/>
* As the list is scrolled, the selected item will reveal additional information. This information should be chosen smartly as it will be used by the user to determine the value of the item.
+
 
 +
Fisheye view can be used in any of the cases where the intent is to display more information to the user for the selected/focused item or portion of the display screen.
 +
 
 +
<table>
 +
<tr>
 +
    <td align="left">
 +
[[Image:list_normal.jpg|frame|A normal list]]
 +
  </td>
 +
    <td align="left">
 +
[[Image:list_fisheye.jpg|frame|A fisheye list]]
 +
  </td>
 +
</tr>
 +
</table>
 +
 
 +
==Common Examples==
 +
 
 +
This kind of implementation makes sense in applications such as where you have list of items like contacts/buddies etc, or even map/camera kind of applications. For details on map implementation image check [http://www.usabilityfirst.com/glossary/fisheye-view/] Usability First Glossary].
 +
 
 +
==Use when==
 +
 
 +
Fish eye can be used when the intention is to show more information for the selected item or the area of the device under focus. The resultant fish eye view/window can be used to show a snapshot of the complete information for the selected item. For example showing the cricket score in 2-3 lines, where you can show the batsmen at the crease, balls faced etc. User can select the list item to explore further, on which if there is still information which would not fit into the fish eye window, you can think about opening a detailed view where the information can be displayed.
 +
 
 +
==Design Tips==
 +
 
 +
* In the case of implementation of fish eye view on a list view, as the list is scrolled, the selected item will reveal additional information in the ensuing fish eye window. This information should be chosen smartly as it will be used by the user to determine the value/state of the item.
 
* Different screen-size and screen-orientation should be taken into account.
 
* Different screen-size and screen-orientation should be taken into account.
* General list-layout guidelines should apply.
+
* In case of fisheye list, general list-layout guidelines should apply, i.e. if items have been searched using the search box, the fisheye view for the selected item should show the details for items matching the search pattern only and not otherwise.
 +
* Denote the fish eye window with either different colored backgrounds/boundaries etc in case of usage with a list view, so that it stands out from the remaining content.
 +
* Let the users decide what content they possibly want to see in the fish eye view.
 +
 
 +
==Before implementation of fish eye==
 +
 
 +
The image below shows how the list box looks without the fish eye implementation, where the content is not displayed in a user friendly way so to speak.
 +
 
 +
<table>
 +
<tr>
 +
    <td align="left">
 +
[[Image:No fisheye implementation.JPG]]
 +
  </td>
 +
  </tr>
 +
</table>
 +
 
 +
<table>
 +
<tr>
 +
    <td align="left">
 +
[[Image:Compact view.JPG]]
 +
  </td>
 +
  </tr>
 +
</table>
 +
 
 +
 
 +
==After implementation of fish eye==
 +
 
 +
The image below shows how the list box looks after the fish eye implementation, where the content is displayed in a user friendly way, in multi lines and the details are more clearly visible and also the highlight with different colored background for the selected text gives the window a distinct visibility as compared to the earlier image.
 +
 
 +
<table>
 +
<tr>
 +
    <td align="left">
 +
[[Image:Fisheye implemented.JPG]]
 +
  </td>
 +
  </tr>
 +
</table>
 +
 
 +
<table>
 +
<tr>
 +
    <td align="left">
 +
[[Image:Detailed view.JPG]]
 +
  </td>
 +
  </tr>
 +
</table>
 +
 
 +
 
 +
* It might also be a good idea to give user more choices pertaining to the selected item through the fish eye window like in the case of a messenger the choice to do calls/send sms etc as options.
 +
 
 +
<table>
 +
<tr>
 +
    <td align="left">
 +
[[Image:Other options.JPG]]
 +
  </td>
 +
  </tr>
 +
</table>
 +
 
 +
==Link==
 +
 
 +
[[How to implement fisheye view]]
 +
 
 +
<b>--- Edited by Mayank on 25/06/2009 ---</b>

Latest revision as of 09:06, 16 April 2012

Article Metadata
Article
Created: User:Rahulsingh1m (21 Jun 2009)
Last edited: hamishwillee (16 Apr 2012)

Contents

[edit] Description

The term fisheye originates from a camera lens, having more detail in the center of the image and less detail on the edges. In a fisheye user interface, the item in focus grows and the non-focus items remain unchanged. A true fisheye list interface would have one item in the middle of the screen, with 2-3 lines of data, a two-line item listing above and below, and all other item having a single line. This thus allows the user to be able to get more content for the item in focus which otherwise might have been missed out with normal view.

Fisheye view can be used in any of the cases where the intent is to display more information to the user for the selected/focused item or portion of the display screen.

A normal list
A fisheye list

[edit] Common Examples

This kind of implementation makes sense in applications such as where you have list of items like contacts/buddies etc, or even map/camera kind of applications. For details on map implementation image check [1] Usability First Glossary].

[edit] Use when

Fish eye can be used when the intention is to show more information for the selected item or the area of the device under focus. The resultant fish eye view/window can be used to show a snapshot of the complete information for the selected item. For example showing the cricket score in 2-3 lines, where you can show the batsmen at the crease, balls faced etc. User can select the list item to explore further, on which if there is still information which would not fit into the fish eye window, you can think about opening a detailed view where the information can be displayed.

[edit] Design Tips

  • In the case of implementation of fish eye view on a list view, as the list is scrolled, the selected item will reveal additional information in the ensuing fish eye window. This information should be chosen smartly as it will be used by the user to determine the value/state of the item.
  • Different screen-size and screen-orientation should be taken into account.
  • In case of fisheye list, general list-layout guidelines should apply, i.e. if items have been searched using the search box, the fisheye view for the selected item should show the details for items matching the search pattern only and not otherwise.
  • Denote the fish eye window with either different colored backgrounds/boundaries etc in case of usage with a list view, so that it stands out from the remaining content.
  • Let the users decide what content they possibly want to see in the fish eye view.

[edit] Before implementation of fish eye

The image below shows how the list box looks without the fish eye implementation, where the content is not displayed in a user friendly way so to speak.

No fisheye implementation.JPG
Compact view.JPG


[edit] After implementation of fish eye

The image below shows how the list box looks after the fish eye implementation, where the content is displayed in a user friendly way, in multi lines and the details are more clearly visible and also the highlight with different colored background for the selected text gives the window a distinct visibility as compared to the earlier image.

Fisheye implemented.JPG
Detailed view.JPG


  • It might also be a good idea to give user more choices pertaining to the selected item through the fish eye window like in the case of a messenger the choice to do calls/send sms etc as options.
Other options.JPG

[edit] Link

How to implement fisheye view

--- Edited by Mayank on 25/06/2009 ---

This page was last modified on 16 April 2012, at 09:06.
189 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×