Mobile Design Pattern: Home Screen

Comments

03 Sep
2009

Article Review by warjan (20090903)

From the article you can learn about the role of home screen - a place where most important shortcuts to apps and information are displayed. Author starts with presenting the existing home screens of S60 devices (except for N97), then present a concept of cube with different home screens on each side. Very attractive, but I am not sure if very useful. Then author gives some snippets for creating widgets for N97 style home screen.

Anyway, my favorite part is when author puts N97's, iPhone's and G1's home screen. N97 has all user cares up front. It is an eye opener moment for me - showing content to the users the way N97 seems for me perfect, because it:

1. Involves user immediately.
2. Give immediate feedback
3. Uses fully screen's real estate.

It was an inspiring read.

---

Log in or Join to leave comments.

Article Metadata

---

Article

Created: kamaljaiswal (13 May 2009)

Last edited: hamishwillee (16 Apr 2012)

Description

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

Few New Ideas About the Mobile Home Screen

Making the Home Screen More Personal By Knowing the User

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.

  

• 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 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.

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.

Purpose: Giving the user more freedom to add application.

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.

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.

Purpose: Giving the user more space for personalization.

Designing Application For Home Screen

Home Screen Widgets Layout Template for N97

Names, layouts and style settings of widget templates

Name	Layout	Style settings
wideimage		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		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		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		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)"; }

Home Screen Comparison

Features
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.

Key Points

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

Reference

• Design_and_User_Experience_Library

• Home Screen Publishing API