×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Design Pattern: Scrollbar

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata etc)
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix image in frame)
Line 1: Line 1:
 +
[[Category:Mobile Design]][[Category:Mobile Design Patterns]]
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
Line 21: Line 22:
 
|author= [[User:Croozeus]]
 
|author= [[User:Croozeus]]
 
}}
 
}}
[[Category:Mobile Design]]
+
 
[[Category:Mobile Design Patterns]]
+
 
 
This design pattern is part of the [[:Category:Mobile Design Patterns|Mobile Design Patterns]] series.
 
This design pattern is part of the [[:Category:Mobile Design Patterns|Mobile Design Patterns]] series.
<br><br>
+
 
 
According to the [http://www.wikipedia.org/ Wikipedia]: "A scrollbar is a graphical object in a GUI with which continuous text, pictures or anything else can be scrolled including time in video applications, i.e., viewed even if it does not fit into the space in a computer display, window, or view port."
 
According to the [http://www.wikipedia.org/ Wikipedia]: "A scrollbar is a graphical object in a GUI with which continuous text, pictures or anything else can be scrolled including time in video applications, i.e., viewed even if it does not fit into the space in a computer display, window, or view port."
  
Line 45: Line 46:
 
* Allow scrolling by the navigation wheels.
 
* Allow scrolling by the navigation wheels.
 
* Allow scrolling by dragging the screen - for touch enabled devices.
 
* Allow scrolling by dragging the screen - for touch enabled devices.
{|
+
 
|[[File:Screenshot0137.jpg|framed|Devoid of scrollbars]]
+
[[File:Screenshot0137.jpg|frame|none|Devoid of scrollbars]]
|}
+
 
* When scrollbar is not used but scrolling is allowed with up and down arrow keys (or any other keys) - the application fails to indicate the end of content to the end-user.
 
* When scrollbar is not used but scrolling is allowed with up and down arrow keys (or any other keys) - the application fails to indicate the end of content to the end-user.
<br>
+
 
 
----
 
----
  

Revision as of 09:26, 7 May 2012

Article Metadata
Article
Created: croozeus (31 May 2009)
Last edited: hamishwillee (07 May 2012)


This design pattern is part of the Mobile Design Patterns series.

According to the Wikipedia: "A scrollbar is a graphical object in a GUI with which continuous text, pictures or anything else can be scrolled including time in video applications, i.e., viewed even if it does not fit into the space in a computer display, window, or view port."

Scrollbars.jpg

Scrollbars are components/tools for scrolling or sliding content on the screen. The default or the built-in scrollbars are the conventional long rectangular scrollbars, preferably used with contrasting colors. However, today with many innovative design patters flowing out, there are varieties of scrollbar designs available. A use of good scrollbar makes the application have a more attractive user interface.

  • Long rectangular scrollbar - Conventional scrollbar

Conventional-scrollbar.jpg

  • Showing arrows at top and bottom of the screen

Arrows-Top-Bottom.jpg

  • Showing arrows at the bottom of the screen

Arrows-Bottom.jpg

  • Using a slider as a scrollbar

Sliderscrollbar.jpg

Allow other scrolling options

  • Allow scrolling by arrow, volume or any other shortcut keys.
  • Allow scrolling by the navigation wheels.
  • Allow scrolling by dragging the screen - for touch enabled devices.
Devoid of scrollbars
  • When scrollbar is not used but scrolling is allowed with up and down arrow keys (or any other keys) - the application fails to indicate the end of content to the end-user.

--Submitted by croozeus 07:39, 31 May 2009 (EEST)

  • croozeus
102 page views in the last 30 days.
×