×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Design Pattern: Home Screen

From Nokia Developer Wiki
Jump to: navigation, search
kamaljaiswal (Talk | contribs)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(25 intermediate revisions by 5 users not shown)
Line 1: Line 1:
[[Category:Mobile_Design]]
+
[[Category:Mobile Design Patterns]]
[[Category:Mobile_Design_Patterns]]
+
{{ArticleMetaData <!-- v1.1 -->
 
+
|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= 20090513
 +
|author= [[User:Kamaljaiswal]]
 +
}}
  
 
==Description==
 
==Description==
Line 7: Line 28:
 
Home Screen, a such important first impression of a mobile device.
 
Home Screen, a such important first impression of a mobile device.
  
==Knowing the User==
+
==Few New Ideas About the Mobile Home Screen==
 +
===Making the Home Screen More Personal By Knowing the User===
  
 
[[Image:Cartoon-id-badge.jpg]]
 
[[Image:Cartoon-id-badge.jpg]]
  
 +
''Description:''
 
Most of the mobile phones has the same home screen how about if the mobile phone has the '''User Id''' or '''User Profile''' where he the details about the owner like.
 
Most of the mobile phones has the same home screen how about if the mobile phone has the '''User Id''' or '''User Profile''' where he the details about the owner like.
 +
# Name
 +
# Driver License
 +
# Birthday
 +
# Photo
 +
# Job Description
 +
# Qualification
 +
# Native Language
 +
# What he likes
 +
# Favorite Food,Destination, Nightmare etc.
  
1:Name
+
''Example:''
  
2:Driver License
+
*If the user is a business man more Business style Desk look could be given.One touch access to ''emails'',''messages'',''any notification'',''calender'',''appointment'',''weather'' etc.
 +
*:[[Image:SpbMobileShell15.png]]  [[Image:E71.jpg]]
 +
*If a student or college going more ''stylish'' ,''music player'' short cuts,''To do list'',''reminder'',''birthday'',things which are important for a college student,whats happening around,connecting to ''social networks'' etc.
 +
*:[[Image:Home-screen5800.jpg]]
 +
*Home screen is decided by the '''mobile by judging user profile''' or the '''user to has the option to customize the Mobile Desktop''' as it is now.
  
4:Birthday
 
  
5:Photo
+
''Purpose:''
 +
As mobile phone is ''not just a phone'' ,its ''who we are''.
  
6:Job Description
+
===Number of Shortcut of application is Restricted on Home Screen===
  
7:Qualification
+
''Description:''
 +
Number of Shortcut of application is now restricted on the ''main screen''.Addition of ''scroll option'' going to give the user to add more application on the main menu.
 +
[[Image:E71_edit.jpg]]  [[Image:Home-screen5800_edit.jpg]] 
  
8:Native Language
+
''Purpose:''
 +
Giving the user more freedom to add application.
  
9:What he likes
 
  
10:Favorite Food,Destination, Nightmare etc.
+
===Full view of Home Screen WallPaper===
 +
''Description:''
 +
User wants the wall paper which is set on the home screen is completely visible.Because of it Window XP  has the option of hiding all the icons on the desktop.This feature is missing on mobile phone of hiding icons on the home screen.
  
 +
Shortcut Menu bar could also be hidden.Thus the full view of Desktop is available.
  
''Example:''
+
[[Image:Home-screen5800_edit.jpg]]  [[Image:5800_3.jpg]]
  
*If the user is a business man more Business style Desk look could be given.One touch access to ''emails'',''messages'',''any notification'',''calender'',''appointment'',''weather'' etc.
+
''Purpose:''
 +
Wallpaper set by user is completely visible without any obstruction.
  
 +
===Concept of Multiple Home Screen===
 +
''Description:''
 +
Concept of '''Multiple Home Screen''' could be introduced in Mobile.
  
[[Image:SpbMobileShell15.png]]  [[Image:E71.jpg]]
+
[[Image:Multiple_Desk.jpg]]
  
 +
''Purpose:''
 +
Giving the user more space for personalization.
  
*If a student or college going more ''stylish'' ,''music player'' short cuts,''To do list'',''reminder'',''birthday'',things which are important for a college student,whats happening around,connecting to ''social networks'' etc.
 
  
  
[[Image:Home-screen5800.jpg]]
+
==Designing Application For Home Screen==
  
  
*Home screen is decided by the '''mobile by judging user profile''' or the '''user to has the option to customize the Mobile Desktop''' as it is now.
+
===Home Screen Widgets Layout Template for N97===
  
 +
[[Image:N97_Home.jpg]]
  
==Concept of Multiple Desktop==
+
'''Names, layouts and style settings of widget templates'''
  
*Concept of '''Multiple Desktop''' could be introduced in Mobile.
+
{| class="wikitable sortable"
 +
|-
 +
! width="150" | Name
 +
! width="150" | Layout
 +
! width="150" | Style settings
 +
|-
 +
|wideimage
 +
|[[Image:Content_type_wide_image.png]]
 +
|<code>
 +
box#wideimagewidget
 +
{
 +
    width:100%;
 +
    height:100%;
 +
    background-color: "SKIN(268458534 9886)";
 +
}
  
 +
image#image_container
 +
{
 +
    width:auto;
 +
    height:auto;
 +
}
  
[[Image:Multiple_Desk.jpg]]
+
text
 +
{
 +
    width:auto;
 +
    height:auto;
 +
    padding-left: 5px;
 +
    font-family: EAknLogicalFontSecondaryFont;
 +
    font-size: 3.5u;
 +
    color: "SKIN(268458534 13056 74)";
 +
}
 +
</code>
 +
|-
 +
|onerow
 +
|[[Image:Content_type_one_row.png]]
 +
|<code>
 +
box#onerowwidget
 +
{
 +
    width:100%;
 +
    height:100%;
 +
    padding-left:2%;
 +
    background-color: "SKIN(268458534 9886)";
 +
}
  
 +
image#image_container
 +
{
 +
    padding-top:5%;
 +
    height: 90%;
 +
    width: 20%;
 +
    _s60-aspect-ratio:preserve;
 +
}
 +
 +
box#text_container
 +
{
 +
    width:auto;
 +
    height:auto;
 +
}
 +
 +
text
 +
{
 +
    padding-left:5%;
 +
    width:auto;
 +
    height:auto;
 +
    font-line-space: 15;
 +
    text-align:left;
 +
    text-overflow-mode: wrap;
 +
    max-line-amount: 2;
 +
    font-family: EAknLogicalFontSecondaryFont;
 +
    font-size: 20px;
 +
    color:"SKIN(268458534 13056 19)";
 +
}
 +
</code>
 +
|-
 +
|threerows
 +
|[[Image:Content_type_three_rows.png]]
 +
|<code>
 +
box#threerowswidget
 +
{
 +
    width:100%;
 +
    height:100%;
 +
    padding-left:2%;
 +
    background-color: "SKIN(268458534 9886)";
 +
}
 +
 +
image#image_container
 +
{
 +
padding-top:5%;
 +
height: 90%;
 +
width: 20%;
 +
_s60-aspect-ratio:preserve;
 +
}
 +
 +
box#text_container
 +
{
 +
    width:auto;
 +
    height:auto;
 +
}
 +
 +
text.text_box
 +
{
 +
    padding-left:5%;
 +
    width:auto;
 +
    height:auto;
 +
    font-family: EAknLogicalFontSecondaryFont;
 +
    font-size: 20px;
 +
    color:"SKIN(268458534 13056 19)";
 +
}
 +
</code>
 +
|-
 +
|threetextrows
 +
|[[Image:Content_type_three_text_rows.png]]
 +
|<code>
 +
box#threetextrowswidget
 +
{
 +
    width:100%;
 +
    height:100%;
 +
    padding-left:2%;
 +
    background-color: "SKIN(268458534 9886)";
 +
}
 +
 +
box#text_container
 +
{
 +
    width:auto;
 +
    height:auto;
 +
}
 +
 +
text.text_box
 +
{
 +
    padding-left:5%;
 +
    width:auto;
 +
    height:auto;
 +
    font-family: EAknLogicalFontSecondaryFont;
 +
    font-size: 20px;
 +
    color:"SKIN(268458534 13056 19)";
 +
}
 +
</code>
 +
|}
  
 
==Home Screen Comparison==
 
==Home Screen Comparison==
  
[[Image:Nokia-n97-5.jpg]]
+
[[Image:Nia.jpg]]
  
 
{| class="wikitable sortable" border="1" style="width: auto;"
 
{| class="wikitable sortable" border="1" style="width: auto;"
Line 78: Line 257:
 
|yes
 
|yes
 
|-
 
|-
|Custom Command Button on Desktop(i.e Shortcut of Application)
+
|Custom Command Button on Home Screen(i.e Shortcut of Application)
 
|yes
 
|yes
 
|no
 
|no
Line 87: Line 266:
 
|yes
 
|yes
 
|yes
 
|yes
 +
|-
 +
|Social Interactivity
 +
|yes
 +
|no
 +
|
 
|}
 
|}
 +
 +
 +
 +
''Social Interactivity Mobile Home Screen:''
 +
The 5800’s contacts bar, though, recognises that some of the functions and information behind those apps are some of the most valuable on the handset, and places them at the forefont. Just by looking at the phone, user can see his/her friend’s latest Twitter tweet or Flickr photo.
 +
 +
[[Image:Social_Nt_5800.jpg]]
  
 
==Key Points==
 
==Key Points==
Line 95: Line 286:
 
*More informative.
 
*More informative.
 
*More customizable.
 
*More customizable.
 +
 +
==Reference==
 +
*[http://www.developer.nokia.com/Resources/Library/Design_and_UX/ Design_and_User_Experience_Library]
 +
 +
*[http://library.developer.nokia.com/topic/S60_5th_Edition_Cpp_Developers_Library/GUID-2E28D8F7-7406-4EBF-BD52-E82BAE1A7D31.html Home Screen Publishing API]

Latest revision as of 09:06, 16 April 2012

Article Metadata
Article
Created: kamaljaiswal (13 May 2009)
Last edited: hamishwillee (16 Apr 2012)

Contents

[edit] Description

Home Screen, a such important first impression of a mobile device.

[edit] Few New Ideas About the Mobile Home Screen

[edit] Making the Home Screen More Personal By Knowing the User

Cartoon-id-badge.jpg

Description: Most of the mobile phones has the same home screen how about if the mobile phone has the User Id or User Profile where he the details about the owner like.

  1. Name
  2. Driver License
  3. Birthday
  4. Photo
  5. Job Description
  6. Qualification
  7. Native Language
  8. What he likes
  9. Favorite Food,Destination, Nightmare etc.

Example:

  • If the user is a business man more Business style Desk look could be given.One touch access to emails,messages,any notification,calender,appointment,weather etc.
    SpbMobileShell15.png E71.jpg
  • If a student or college going more stylish ,music player short cuts,To do list,reminder,birthday,things which are important for a college student,whats happening around,connecting to social networks etc.
    Home-screen5800.jpg
  • Home screen is decided by the mobile by judging user profile or the user to has the option to customize the Mobile Desktop as it is now.


Purpose: As mobile phone is not just a phone ,its who we are.

[edit] Number of Shortcut of application is Restricted on Home Screen

Description: Number of Shortcut of application is now restricted on the main screen.Addition of scroll option going to give the user to add more application on the main menu. E71 edit.jpg Home-screen5800 edit.jpg

Purpose: Giving the user more freedom to add application.


[edit] Full view of Home Screen WallPaper

Description: User wants the wall paper which is set on the home screen is completely visible.Because of it Window XP has the option of hiding all the icons on the desktop.This feature is missing on mobile phone of hiding icons on the home screen.

Shortcut Menu bar could also be hidden.Thus the full view of Desktop is available.

Home-screen5800 edit.jpg 5800 3.jpg

Purpose: Wallpaper set by user is completely visible without any obstruction.

[edit] Concept of Multiple Home Screen

Description: Concept of Multiple Home Screen could be introduced in Mobile.

Multiple Desk.jpg

Purpose: Giving the user more space for personalization.


[edit] Designing Application For Home Screen

[edit] Home Screen Widgets Layout Template for N97

N97 Home.jpg

Names, layouts and style settings of widget templates

Name Layout Style settings
wideimage Content type wide image.png
box#wideimagewidget
{
width:100%;
height:100%;
background-color: "SKIN(268458534 9886)";
}
 
image#image_container
{
width:auto;
height:auto;
}
 
text
{
width:auto;
height:auto;
padding-left: 5px;
font-family: EAknLogicalFontSecondaryFont;
font-size: 3.5u;
color: "SKIN(268458534 13056 74)";
}
onerow Content type one row.png
box#onerowwidget
{
width:100%;
height:100%;
padding-left:2%;
background-color: "SKIN(268458534 9886)";
}
 
image#image_container
{
padding-top:5%;
height: 90%;
width: 20%;
_s60-aspect-ratio:preserve;
}
 
box#text_container
{
width:auto;
height:auto;
}
 
text
{
padding-left:5%;
width:auto;
height:auto;
font-line-space: 15;
text-align:left;
text-overflow-mode: wrap;
max-line-amount: 2;
font-family: EAknLogicalFontSecondaryFont;
font-size: 20px;
color:"SKIN(268458534 13056 19)";
}
threerows Content type three rows.png
box#threerowswidget
{
width:100%;
height:100%;
padding-left:2%;
background-color: "SKIN(268458534 9886)";
}
 
image#image_container
{
padding-top:5%;
height: 90%;
width: 20%;
_s60-aspect-ratio:preserve;
}
 
box#text_container
{
width:auto;
height:auto;
}
 
text.text_box
{
padding-left:5%;
width:auto;
height:auto;
font-family: EAknLogicalFontSecondaryFont;
font-size: 20px;
color:"SKIN(268458534 13056 19)";
}
threetextrows Content type three text rows.png
box#threetextrowswidget
{
width:100%;
height:100%;
padding-left:2%;
background-color: "SKIN(268458534 9886)";
}
 
box#text_container
{
width:auto;
height:auto;
}
 
text.text_box
{
padding-left:5%;
width:auto;
height:auto;
font-family: EAknLogicalFontSecondaryFont;
font-size: 20px;
color:"SKIN(268458534 13056 19)";
}

[edit] Home Screen Comparison

Nia.jpg

Features S60 small.jpeg Apple.jpeg Android-logo.gif
Customizable widget yes no yes(from SDK 1.5)
Network Signal yes yes yes
Custom Command Button on Home Screen(i.e Shortcut of Application) yes no
Notification(incoming sms,call) yes yes yes
Social Interactivity yes no


Social Interactivity Mobile Home Screen: The 5800’s contacts bar, though, recognises that some of the functions and information behind those apps are some of the most valuable on the handset, and places them at the forefont. Just by looking at the phone, user can see his/her friend’s latest Twitter tweet or Flickr photo.

Social Nt 5800.jpg

[edit] Key Points

  • Should be Cool.
  • One touch access to all important application.
  • More informative.
  • More customizable.

[edit] Reference

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