26
Improvising Twitlonger.com By Kamiyah (Kimmy) 102005 Design for Interactivity, Year 2 Republic Polytechnic Ps: Please view this file in slideshow mode, since there are certain animations for each slide. Thank you.

Twitlonger ppt by Kimmy 102005

Embed Size (px)

DESCRIPTION

For my portfolio. Apparently the portal from school doesnt allow us to upload ppt files, which is REALLY weird, so I have no choice but to use this. =/

Citation preview

Page 1: Twitlonger ppt by Kimmy 102005

Improvising

Twitlonger.comBy Kamiyah (Kimmy)

102005Design for Interactivity, Year 2

Republic Polytechnic

Ps: Please view this file in slideshow mode, since there are certain animations for each slide.

Thank you.

Page 2: Twitlonger ppt by Kimmy 102005

What is Twitlonger.com?

• It is a website that is ‘associated’ with Twitter.com• Because Twitter.com has a tweet limit of 140

characters, Twitlonger.com was created to cater to twitter users who wants to tweet longer than 140 characters.

• Twitlonger.com ’s tagline, ‘For when you talk too much for twitter’ clearly shows that it was created for tweeting tweets longer than 140 characters.

Page 3: Twitlonger ppt by Kimmy 102005

PART 1:Understanding and Evaluating

the current interface ofTwitlonger.com

Page 4: Twitlonger ppt by Kimmy 102005

Twitlonger.com-Log In Page-

http://www.twitlonger.com/index.php/main_new

This is how the Log In Page looks like. Plain and simple, isnt it?

The constant things kept throughout the whole website, is the HEADER, the BANNER,

and the FOOTER.

Header

Banner

Footer

Page 5: Twitlonger ppt by Kimmy 102005

Twitlonger.com-Log In Page-

Hidden button. Click it and it will

lead the user back to this same page.

Header. Remains the

same in every page of the

website.

Link. Leads user to Twitlonger’s Twitter Page.

Acts as a log in button.

Users MUST have a Twitter

Account in order to log

in.

Links that lead users to

another page. Links are the

same as those from Header.

Click and button will change to ‘ Like’ with a tick symbol.

Clickable links that lead users to other pages.

Page 6: Twitlonger ppt by Kimmy 102005

Twitlonger.com-Log In Page-

Once the ‘Like’ button is clicked, the button becomes inactive, and then this will pop up and link users to

their Facebook accounts.

Page 7: Twitlonger ppt by Kimmy 102005

Twitlonger.com-Home Page-http://www.twitlonger.com/index.php/main_new/

This is the Home Page, where users would mainly be at when they use this website. It has the same design/look as the log in

page, with the header, banner and footer in the same place.

Page 8: Twitlonger ppt by Kimmy 102005

Twitlonger.com-Home Page-

Buttons. ‘write’ refreshes the page, while ‘my account’ leads user to their

account page.

Link that leads user to their Twitter Page.Hover over it and a pop up will appear.

Leads user back to Log In Page.

Number automatically counting the number of characters in the tweet.

Button colour changes to a darker blue once hover over. Leads user to another page where the posted tweet

is shown.

A profile/account bar is added to the page. This will

be in every page in the website when the user is

logged in.

Page 9: Twitlonger ppt by Kimmy 102005

Twitlonger.com-Tweet Posted Page-

This is the page when a tweet is posted. The look/design of the page is very different as compared to the log

in page and the home page.

Page 10: Twitlonger ppt by Kimmy 102005

Twitlonger.com-Tweet Posted

Page-Hidden button. Leads user back to home

page.

User’s profile photo, Name with Twitter username,

and details of the post.

Nothing can be clicked in this section.

Shows the number of ‘retweets’ and ‘likes’ related to this post.

Space for Advertisements

Section where the

posted tweet is shown.

Clickable links. Colour change to black once

hovered over.

Page 11: Twitlonger ppt by Kimmy 102005

Twitlonger.com-Error Page-

Hidden button. Leads user back to home

page.

Space for Advertisements

Section for Error

disclaimer.

‘Home’ leads user back to Home Page.

Page 12: Twitlonger ppt by Kimmy 102005

Twitlonger.com-‘my account’ Page-

Leads user to another page where their past posts are shown

Leads user to another page where they can retrieve their old posts.

Nothing can be clicked in this section. Details

separated with bullet points.

Page 13: Twitlonger ppt by Kimmy 102005

Twitlonger.com-Posts from

Account Page-

Navigations to other pages of this part of the website.

Page title.

Tweet posted.

Details of post (date and

day)

Leads user to Tweet Posted

Page.

Leads user to Delete Post Page.

Page 14: Twitlonger ppt by Kimmy 102005

Twitlonger.com-Retrieve Old Posts Page-

Nothing can be clicked in this section. Details separated with

bullet points.

Page 15: Twitlonger ppt by Kimmy 102005

Twitlonger.com-Delete Post Page-

Check box.

Button colour changes to a darker blue once hover over. Leads user back to

Post from Account Page.

‘Message deleted’ be be

shown.

Details of chosen post to be deleted.

Page 16: Twitlonger ppt by Kimmy 102005

After going through the website,

• I realized that there isn’t any problem with the navigations and the website is easy to understand because of the simple English language used.

• However, I find that the website looks too simple and perhaps, boring. • As far as I know, Twitter is a fun website/application where users can tweet

about anything. So, I feel that Twitlonger doesn’t show that fun factor about Twitter.

• I realized that Twitlonger doesn’t do categorizing that well. For example, the ‘Posts from Account Page’ where each post are separated by lines. I find that really ugly.

• And I don’t understand why the ‘home page’ and the ‘tweet posted’ page looks totally different. It gives me a feeling that Twitlonger doesn’t have an identity.

Page 17: Twitlonger ppt by Kimmy 102005

Survey Qns 1Gender:

Finding out the gender of the user helps me to have a better understanding of which gender uses twitlonger more, and it seemed that there are more girls using twitlonger, based on this result.If female users are the majority, then perhaps the theme of the website could be slightly ‘girly’ or more suited to the female gender.

Page 18: Twitlonger ppt by Kimmy 102005

Survey Qns 2Age:

Finding out the age of the user helps me to have a better understanding of which age group uses twitlonger more, and it seemed that majority of the users are of ages 18 to 25.With the age group in mind, perhaps the language of the website could be considered to help them have better understanding. A complicated website wouldn’t be easy for a young person to use.

Page 19: Twitlonger ppt by Kimmy 102005

Survey Qns 3When you first used Twitlonger.com, did you face

any problems?

Finding out the problems faced by the user helps me to have a better understanding of what problems Twitlonger will have, or what problems users would encounter when they use Twitlonger.com. With that in mind, the interface of the website can be improved and can be better if such problems were reduced.

Page 20: Twitlonger ppt by Kimmy 102005

Survey Qns 4How easy is it to navigate

twitlonger.com?

Finding out the opinions/experience of navigating around the page by the user helps me to have a better understanding as to whether users have a problem using the website throught he navigations.With that in mind, the navigation interface of the website can be improved and it can be better if such problems were reduced.

Page 21: Twitlonger ppt by Kimmy 102005

Survey Qns 5How visually appealing is twitlonger.com?

Finding out the opinions of the website’s design and look by the user helps me to have a better understanding as to whether the website is visually appealing and interesting to keep the users using the website.With that in mind, the design interface of the website can be improved and it can be better if the design helps to give the website the ‘fun’ factor of Twitter.

Page 22: Twitlonger ppt by Kimmy 102005

Survey Qns 6What changes do you think would improve the

website?

Finding out what the users wants to see changes of in the website would help me re-design the webpage with their needs in mind. With that in mind, the whole interface of the website can be improved and it can be better if such problems were reduced.

Page 23: Twitlonger ppt by Kimmy 102005

From the survey results,

• I found out that users, like me, don’t really face any problem while using the website.

• Many felt that the navigations of the website can be improved the most.

• Some felt that the website looked alright, though one said it was visually unappealing.

• So with these users’ comments in mind, I will then ideate a few ideas that solve the problems faced by them.

Page 24: Twitlonger ppt by Kimmy 102005

Ideation 1

Users can change the

background to pictures or

different colours.

Logout and user profile buttons at the top

instead of under the banner.

Archives added to allow user quick access to their past

posts, instead of having to go to ‘account’ then ‘manage past

posts’.

Acts as a prompt to let usrrs know that their tweet

has been posted. To view the tweet, they

will have to click ‘here’.

Page 25: Twitlonger ppt by Kimmy 102005

Ideation 2Users can change the

background to pictures or

different colours.

Logout and user profile buttons at the top

instead of under the banner.

Archives added to allow user quick access to their past

posts, instead of having to go to ‘account’ then ‘manage past

posts’.

Inspired by the word ‘write’, a

notepad represents the

field where users would type their tweet in before

posting it.

Page 26: Twitlonger ppt by Kimmy 102005

Ideation 3Users can change the

background to pictures or

different colours.

Logout, settings and user profile buttons at

the top instead of under the banner.

A talking human with the speaker to emphasis on

Twitlonger.com’s tagline, ‘for when you TALK too much for

twitter’.

Acts as a prompt to let usrrs know that their tweet

has been posted. To view the tweet, they will have to

click ‘view in page’.