Touch screen porting

25
Home screen Express yourself Inbox This is a carousel i.e. one swipe of the finger brings forth more icons on this. We will store at least 6 more images for this one janaki_krishnan_iyer20 Options Looking for something? The status message, Click anywhere on this row will bring up the compose message screen *****Check out new games in Fun stuff****** Update status Compose Post to gallery Components of the status message will display here like VTP, but these are buttons and will play the attached component in the central media player Notes: -Inbox & Home icon on the bottom bar -Status update re-think – have the option of voice and other multi- media entry right there. Perhaps have the update status instead of edit profile -Call message – Compose instead or probe to find out -Friends – how many online Notes: -The inbox counter will show the new messages which are in after the user last vewed them Gallery 0 10 Friends Communities

description

Touch Screen porting document for an existing mobile social network on smart phones & the web. This design document includes graphic UI Designs as well as design & porting specifications. Use cases & conditions have been laid out in detail. Guidelines for the developers are in place. The target phones for this app were non-apple touch screen bar sized devices.

Transcript of Touch screen porting

Page 1: Touch screen porting

Home screen

Express yourself

Inbox

This is a carousel i.e. one swipe of the finger brings

forth more icons on this. We will store at least 6 more

images for this one

janaki_krishnan_iyer20

Options

Looking for something?

The status message, Click anywhere on this row will

bring up the compose message screen

*****Check out new games in Fun stuff******

Update status ComposePost to gallery

Components of the status message will display here like VTP, but these are buttons and

will play the attached component in the central media

player

Notes: -Inbox & Home icon on the bottom bar-Status update re-think – have the option of voice and other multi-media entry right there. Perhaps have the update status instead of edit profile-Call message – Compose instead or probe to find out-Friends – how many online

Notes: -The inbox counter will show the new messages which are in after the user last vewed them

Gallery

010

Friends Communities

Page 2: Touch screen porting

Home screen

Mute

Connectivity test

About

Help

Log off

Invite friends to RockeTalk

Express yourself

janaki_krishnan_iyer20

Options

Looking for something?

*****Check out new games in Fun stuff******

Update status ComposePost to gallery

Contests SettingsDownloadsMessengers

Page 3: Touch screen porting

Friends’ List

Amit_rastogi

Start typing a name to search

1010

MeenaProfile

GenE_RocKer

Lovely_eyes

Anup

Irfan_jafri

Message Buzz

Friends’ list options

Feels like killing someone…..

Back

Notes: -Inbox & Home icon on the bottom bar

-The search bar has a search icon attached. Clicking on this icon will search the database.

Home10

Feels like killing someone…..

Feels like killing someone…..

Video status – click to view

Video & voice status - click to view

3 pictures in status – click to view

Page 4: Touch screen porting

Friends’ List

Thumbnails for the first ten friends will be shown here. When the user is on friend 05 – the next

5 will be downloaded.

When someone is searching. All the cached photos will display, the uncached ones will not be

called.

Amit_rastogi

Start typing a name to search

1010

MeenaProfile

GenE_RocKer

Lovely_eyes

Anup

Irfan_jafri

Message Buzz

Friends’ list options

Feels like killing someone…..

Back Home10

Feels like killing someone…..

Feels like killing someone…..

Video status – click to view

Video & voice status - click to view

3 pictures in status – click to view

Page 5: Touch screen porting

Friends’ List

When touched

The status scrolls. When the user

clicks on it, it plays voice, or video in a slideshow format. Voice auto-plays when the friend is

clicked.

Amit_rastogi

Start typing a name to search

1010

MeenaProfile

GenE_RocKer

Lovely_eyes

Anup

Irfan_jafri

Message Buzz

Friends’ list options

Feels like killing someone…..

Back Home10

Feels like killing someone…..

Feels like killing someone…..

Video status – click to view

Video & voice status - click to view

3 pictures in status – click to view

Notes: -Buzz multiple friends should be allowed-For the moment, buzz will be greyed out if a person chooses multiple friends. If the user clicks on it , it will display an error sound.

Page 6: Touch screen porting

Inbox1010

Irfan_jafri

Anup

Lovely_eyes

GenE_RocKer

Amit_rastogi

From: Meena

To: You, Pooji, Brun..

Salilmaladkar

3 min ago

Inbox options

Message options Reply

Compose

Check new messages

Outbox

Sent items

Clear all messages

Show blocked users

Home

Exit

Get my bookmarked messages

Back Home

Page 7: Touch screen porting

Inbox1010

Irfan_jafri

Anup

Lovely_eyes

GenE_RocKer

Amit_rastogi

From: Meena To: You, Pooji, Brun..

Salilmaladkar

3 min ago

Inbox options

Compose

Notes: -Inbox & Home icon on the bottom bar-Multiple options especially delete only show up when stuff is marked-Think of the place where you can have the delete button show up when stuff is marked-Recommended – middle of the screen-Think about having the text open up right there if its only a text message-Have a pop up sayhing ‘Clik here to see prfile’ appear and go away on the person’s thumbnail image

Back Home

These buttons will appear with a dissolve

in effect once anything is ticked. The outline will glow orange and then settle to black so that the user’s gaze is riveted to

themThe reply/reaply all function will not

display.

Profile

The profile button will appear and disappear when the row is clicked on.

Notes: -Instead of the block option use the arrow function

Friend options Reply

Page 8: Touch screen porting

Inbox1010

Amit_rastogi

From: Meena To: You, Pooji, Brun..

3 min ago

Inbox options

Compose

Notes: -Inbox & Home icon on the bottom bar-Multiple options especially delete only show up when stuff is marked-Think of the place where you can have the delete button show up when stuff is marked-Recommended – middle of the screen-Think about having the text open up right there if its only a text message-Have a pop up sayhing ‘Clik here to see prfile’ appear and go away on the person’s thumbnail imageBack Home

Profile

Hey guys..how about a party at my place this weekend. I’ll arrange the food. You guys get the booze. What say? Lets call Raj and Gul as well. They’ve …

If the message is only text, it will automatically open up the

text panel right there in the inbox itself.

If it has too much text to show in half the screen, then X

characters will be shown with an expand button

Friend options

Reply

Page 9: Touch screen porting

Inbox1010

From: Meena To: You, Pooji, Brun..

3 min ago

Inbox options

Compose

Notes: -Inbox & Home icon on the bottom bar-Multiple options especially delete only show up when stuff is marked-Think of the place where you can have the delete button show up when stuff is marked-Recommended – middle of the screen-Think about having the text open up right there if its only a text message-Have a pop up sayhing ‘Clik here to see prfile’ appear and go away on the person’s thumbnail imageBack Home

Profile

If the message is only voice, it will open in the inbox itself.

XX:XX

Amit_rastogi

Friend options

Reply

The above panel will remain open even after the message

has played. A flick of the finger on this message will bring the

previous inbox view back

Page 10: Touch screen porting

Message with picture(s)1010

From: Meena

To: You, Pooji, Brun..

3 min ago

1010

From: Meena

To: You, Pooji, Brun..Profile

3 min ago

Hello…what you doing? Have y.. Hello…what you doing?

This text scrolls by in a readable speed.

ReplyReply all ReplyReply all

Notes: -The profile button can dissappear once its shwon on open-If there is text give an expand button which will open up the text panel

Back Home10 Back Home10

Page 11: Touch screen porting

Message with audio1010

From: Meena

To: You, Pooji, Brun..Profile

3 min ago

Hello…what you doing?

Case I - Audio auto-playing. XX:XX counter running

Case II - Audio on muteCounter stopped

1010

From: Meena

To: You, Pooji, Brun..Profile

3 min ago

Hello…what you doing?

XX:XX

ReplyReply all ReplyReply all

Back Home10 Back Home10

XX:XX

Page 12: Touch screen porting

Message with audio1010

From: Meena

To: You, Pooji, Brun..Profile

3 min ago

Hello…what you doing?

Case III- Audio stops playing.Counter panel slides back in leaving

only the audio button

Case IV – There is audio attached but not playing

1010

From: Meena

To: You, Pooji, Brun..Profile

3 min ago

Hello…what you doing?

ReplyReply all ReplyReply all

Back Home10 Back Home10

Page 13: Touch screen porting

Message with video1010

From: Meena

To: You, Pooji, Brun..Profile

3 min ago

1010

From: Meena

To: You, Pooji, Brun..Profile

3 min ago

Hello…what you doing? Hello…what you doing? Have..

ReplyReply all ReplyReply all

Back Home10 Back Home10

Page 14: Touch screen porting

Message with all media1010

From: Meena

To: You, Pooji, Brun..Profile

3 min ago

Hello…what you doing?

ReplyReply all

Notes: -The bottom array where the other thumbnails are appearing shouwl not be there…make space for the text instead with the expand button

Back Home10

Page 15: Touch screen porting

Media carousel1010

From: Meena

To: You, Pooji, Brun..Profile

3 min ago

Hello…what you doing?

The images will work as a carousel. Sideways swipe will blow

up the next image.

The user can also drag an image out of the line and bring it to the

panel to blow up.

ReplyReply all

Back Home10

Page 16: Touch screen porting

Slideshow player

Back

The image will progress to the next one in the following

conditions

1- .5 seconds have lapsed2 – the user makes a swipe

on the image. In each case, the image will

be animated as it swipes across.

Page 17: Touch screen porting

Slideshow player

Back

If the user touches the slideshow, it will pause at the

image which is in focus.

In this case a play button will appear again. The slideshow will start playing again if the

user clicks on the play button or if he makes a swipe with

his hand again.

Page 18: Touch screen porting

Slideshow player

Back

When the slideshow comes to a video thumbnail, the

thumbnail will behave exactly like an image. Until the user clicks on it. The moment a user clicks on the image, it

will open the video player as on the next slide and start

playing.

Page 19: Touch screen porting

Slideshow player

Back

When the slideshow comes to a video thumbnail, the

thumbnail will behave exactly like an image. Until the user clicks on it. The moment a

user clicks on the image, it will open the video player as on

the next slide and start playing.

The player controls disappear after sometime and appear again in the following cases:

1- the video stops playing2 - The user touches the

screen

Page 20: Touch screen porting

Gallery1010

Search Post

Most Recent posts

Friends’s posts

Last week’s popular posts

Categories

BackHome

Page 21: Touch screen porting

Post1010

Search Post

Ammit’s post

Categories

View slideshow (8 pics)

Rate

Family pics, amit, me

Category: Bollywood------------------

------------------Share post

For the media a display template will be

created. And the rest of the RTML will show

below

In the RTML each link will be presented in the form of a button with an isolation area around it

to make sure that erroneous touches do

not take place

The RTML will be scrolled through swipes

as well as the scroller with a big enough

button to be able to be clicked and dragged

BackHome

Page 22: Touch screen porting

Compose message

1010

Reply to:

Meena, Pooji, Brun..

Tap here to enter text…

Send

Back Home10

Add recipients

History

Record voice Open camera Phone Gallery

Page 23: Touch screen porting

Compose message1010

Reply to:

Meena, Pooji, Brun..

Tap here to enter text…

Send

Back Home10

Add recipients

History

XX:XX of XX seconds recorded

1010

Reply to:

Meena, Pooji, Brun..

Tap here to enter text…

Send

Back Home10

Add recipients

History

XX:XX sec (415 KB)

Page 24: Touch screen porting

Compose message1010

Reply to:

Meena, Pooji, Brun..

Tap here to enter text…

Send

Back Home10

Add recipients

History

(415 KB)

Click ‘n’ attach

(185 KB left)

Page 25: Touch screen porting

Compose message1010

Reply to:

Meena, Pooji, Brun..

Tap here to enter text…

Send

Back Home10

Add recipients

History

(415 KB) (52 KB) (133 KB left)

1010

Reply to:

Meena, Pooji, Brun..

Send

Add recipients

History

(415 KB) (52 KB) (133 KB left)

2205200804.jpgPicture 02.jpg02/01/07 3:22 PM

Picture 02.jpg02/01/07 3:22 PM

Picture 02.jpg02/01/07 3:22 PM

Attach