Wednesday, 22 October 2008

Interface Web Design ★



To my fellow buddies , friends and also visitors :)


I am doing a user-testing for my Interface Web design that is requested by our lecturer.
Hope u guys can spend a lil time to help out :)
yeah just a few minutes will do!
Any comments, critiques, suggestions are welcomed here so that i can have improvement in my work.
Thank you very muchiee~


So the story goes like this, its actually based on a folklore story from Native American Legend. The title of this story is
" Bear and Chipmunk " . Bear is a very arrogant animal and thinks that he's a the most powerful creature among the animals. One day, a chipmunk challenge bear to stop the sun from rising in the morning, Bear is sure that he could stop the sun from rising and chipmunk thinks that bear is foolish. Bear then sat down facing east to wait, from night to the next morning. For his great disappointment, the sun rose, just as it always had. Bear was upset but chipmunk was laughing at Bear and keeps making fun at him. Bear was terribly angry and he tried to kill chipmunk by pinning and pressing him on the ground. In fear, chipmunk begs Bear to let him go and with some trick, the chipmunk finally manage to escape and runs for his life. Bear was not quick enough to catch him, but the very tips of his long claws scraped along Chipmunk's back leaving three pale scars.

That's why all chipmunk has 3 scars on their back as a reminder of making fun of others.





* * *


Target audience : kids age 9 - 12



* * *


Here's the loading page

( From 0% to 100% , from moonset to sunrise )







* * *



The next is the Home page

( i made it into a short animation instead of one page so that the audience will have some eye movement travelling across the page. )


( The audience doesn't need to click anything , it will move all by itself )

EXCEPT 'enter'



* * *



This is the Character intro part

I used Acorns nut to symbolize Chipmunk

and a Paw-print to symbolize Bear



This is a roll-over effect. When your cursor point to the nut, the chipmunk will automatically pop-up and same with the paw-print.



* * *



This is one of the scene in the story

where the chipmunk is laughing at bear and

bear started to get angry.



* * *



Game instructions

This is a speed typing game where players need to type ' I am here to save you ' within 5 seconds or else the chipmunk will be killed.




Let the game begins...

( imagine you're the chipmunk cuz the audience eye view is the chipmunks eye view )

The acorns nut represent the countdown for the player to get ready and once its green, the player can start to type as fast as she/he could while the image will become more and more red showing that the chipmunk is becoming weaker and weaker. If the player failed to type the sentence in time, the chipmunk will die and its GAME OVER. Player can click ' play again ' to give another try or just quit the game.




* * *



Feel free to click to view in LARGER image

and some of the page i compiled it in a short clip so that everybody can clearly understand how the flow goes and also the navigations.

Hope you guys did enjoyed :)




* * *



Here's some Questions :


1. Is the overall mood suits my story theme ?

A. Yup! im comfortable with it

B. Not bad, but can be better

C. I dont think so, somethings's wrong

D. Not at all


2. Is the text hard to read ?

A. I can understand and read it well

B. Still okay, need time to digest

C. Not really, its all crumbled up

D. Im confused


3. What u like most about the interface design ?

A. Character

B. Layout

C. Navigation

D. Colour mood

E. Everything!


4. Do u feel this interface is interactive enough ?

A. Yes, I had fun!

B. No, why?


5. Do you like the game part ?

A. Yup! Its quite interesting

B. No, i think its boring.

C. Could be better


6. Is the whole interface design appealing to your eye ?

A. Yes, its great!

B. Quite, but need some improvement.

C. There's something wrong somewhere.


7. Which part do u guys think i should improve the most?

A. Colour combination

B. Character design

C. Typeface

D. Navigation

E. Others


8. Any comment or suggestion to further improve my interface web design ?

_____________________________________________________________


( please comment in this post yah )


Thanks for spending your time on my user-test !

appreciated :)



lOts Of lOve,

Kelly

13 comments:

Anonymous said...

1. Is the overall mood suits my story theme ?
A. Yup! im comfortable with it

2. Is the text hard to read ?
A. I can understand and read it well

3. What u like most about the interface design ?
B. Layout

4. Do u feel this interface is interactive enough ?
A. Yes, I had fun!

5. Do you like the game part ?
C. Could be better

6. Is the whole interface design appealing to your eye ?
A. Yes, its great!

7. Which part do u guys think i should improve the most?
B. Character design


8. Any comment or suggestion to further improve my interface web design ?

I adore your concept, your idea, your layout design, your color combination, and I am willing to spend some time on this website with the design like this. Good =)

Just one thing, I think your character design on the character intro part is good, just when it comes to the home page part and the game part, it looks like something wrong.

Kelly Hoh Ai Reen 何艾璘 said...

tze e you're damn fast lor!
thanks for ur comment and suggestions :)
will consider about it !
love ♥

e Loe said...

1. Is the overall mood suits my story theme ? (B)

2. Is the text hard to read ?
(B) the game instruction there.

3. What u like most about the interface design ? (B)

4. Do u feel this interface is interactive enough ? (A)

5. Do you like the game part ?
C. Could be better

6. Is the whole interface design appealing to your eye ?
B. Quite, but need some improvement.

7. Which part do u guys think i should improve the most?
typeface =)

my thoughts. don mind o keL

Nicholas Fong said...

1.A
2. B (but the fonts suits the whole bear story)
3. B (hmm maybe u can put a border to seperate the visuals and the background.. )
4. A (yes i love the game ;])
5. A
6. b hmm okay, maybe one down the brown)
7. A
8. hmm maybe u can put a border to seperate the visuals and the background..

Quin said...

1. Is the overall mood suits my story theme ?

A. Yup! im comfortable with it


2. Is the text hard to read ?


A. I can understand and read it well


3. What u like most about the interface design ?


A. Character and B. Layout
i happen to like ur b/g a lot, with the textures and the bright colours. very suitable for ur concept. but who're ur target audience? kids? i don't think u mentioned.

4. Do u feel this interface is interactive enough ?

A. Yes, I had fun!

5. Do you like the game part ?
C. Could be better

6. Is the whole interface design appealing to your eye ?

A. Yes, its great!

7. Which part do u guys think i should improve the most?
B. Character design
Everything looks really great, but the only thing that looks out of place to me is the illustration of the bear. maybe it's due to the colouring/style, it's very different from everything else.

8. Any comment or suggestion to further improve my interface web design ?
great job! just the comment about the bear and also who ur target audience is.

Anonymous said...

1. Is the overall mood suits my story theme ?
A. Yup! im comfortable with it


2. Is the text hard to read ?
A. I can understand and read it well


3. What u like most about the interface design ?
B. Layout
D. Colour mood


4. Do u feel this interface is interactive enough ?
A. Yes, I had fun!


5. Do you like the game part ?
C. Could be better


6. Is the whole interface design appealing to your eye ?

A. Yes, its great!
B. Quite, but need some improvement.



7. Which part do u guys think i should improve the most?

B. Character design


8. Any comment or suggestion to further improve my interface web design ?

i.the loading page seems not that match with the whole website. maybe it's because of the color mood of it.

ii.for the characters intro part, the Paw-print that you used to symbolize Bear looks weird due to the shape an also the looks after you clicked on it to show the bear's characteristic.

iii. the game play can be more fun. maybe you can do something like photo hunt but is not exactly like it. for example, when the audience must click on the right object to help it moves faster. then u can make a lil bit motion on those preset items when the cursor move on it.

that's just my opinion.

琴 Kimm said...

1. Is the overall mood suits my story theme ?
A. Yeah, it's very suitable. Cute, wooden, and sassy.

2. Is the text hard to read ?
A. Kind of. Embossing it inside and having the text look like it's carved in is brilliant, but unfortunately if it's too light people can't really read it. So what I would suggest is to use a darker coloured font, keep the fill at about 90%, don't touch the opacity, and use the emboss/pillow effect, whichever effect you're using that makes it look so realistic. :)


3. What u like most about the interface design ?
B. Layout
D. Colour mood

4. Do u feel this interface is interactive enough ?
A. Yes, I had fun! - Definitely! I for one need to incorporate more interactivity into mine.

5. Do you like the game part ?
C. It can be better organized visually, I suppose?

6. Is the whole interface design appealing to your eye ?
It's good - but I guess maybe you could try using thicker strokes or something around the characters to make them stand out a little more? And maybe blend the background a little more so that the images on the wood will be more prominent and clear.


7. Which part do u guys think i should improve the most?
Character design and typography.

8. Any comment or suggestion to further improve my interface web design ?
Actually, all that I would've wanted to say here I've answered in my previous answers. :) Typography, really. Maybe use a more consistent font? Otherwise, I really like like the effect you're trying to convey.

weemei said...

1. A yup, doesnt look boring wif the texture.
2. A can read la~ veli chubby de feel~~
3. E ( E for everything!!!! ^^)
4. A ( i like dat game actuali!!!) hope can play a new one~)
5. A GAME~ dat scene look cute, like watching 3d movie, WOow~)
6. A i like it
7. cant reali tel when 2 improve~ overall not bad~
8. the style of loading page dengan page dalam macam ada different ?

Kok Meng said...

Wah! Great for your interactive design. I like it. Your background is nice, your navigation you did quite well also, for your character design is cute, and I think game design is quite fun too. But the only thing is I can't get what the loading means.Anyway, for overall I like your design.

Kelly Hoh Ai Reen 何艾璘 said...

thanks for everybody's precious comments and critiques ;) will refine it so that it will look better !

as for my loading page, i use the concept of moonset and sunrise because it is related to my story where the chipmunk challenged the bear to stop the sun from rising and bear sat and wait from night till mornin and in the end, the sun rises as it always does .

Lin Er said...

1. A
2. A
3. D
4. A
5. A (how many level for that game ya?)
6. B
7. B. Character design

♥ wen ♥ said...

1. a
2. a
3. a, d
4. a
5. a
6. no ithink is quite interesting
7. i think overall is ok i like it

BeL_Dia said...

1.A
2.B
3.E
4.A
5.C
6.A
7.D
8.I would like to try the game, looked quite interesting, fun and fresh. However, i think the whole webpage looked a bit lack of color attraction. Maybe if it's more 3D will look more attractive.
Anyway, nice try. Hope this would help you to improve:)