Thursday, November 8, 2007

Been busy on preparing presentation and the report

Been really busy this month. It had been the busies month ever since every assignment have to be hand in at that period of time and especially 2 of my assignment is considered "huge". Realized how forgetful am I that I should spent a few time in blogs.

Oh well, at least the presentation seems to went fine. For all these hard work both me and Hikaru had contributed, I do hope that I can get a decent mark or...at least a 5 for me to get into my honous.

Ok...this is what I've been written for my report, bellow is the structure

-Goals

-Design Process

-Production Process

- Output Evaluation for Design guideline booklet

- Output Evaluation for Demonstration site

So...I think basically these topics will cover up everything.

BTW, another great non-click site...should post this ages ago but I just don't have the time since I have a site to develop and a document to write...oh...and a 9000 word report.

It is a site from Japan for a famous musical instrument coporation...Yamaha, I'm quite sure most of the people had heard before.

http://www.yamaha.co.jp/design/index_f.html

Hikaru found this website to be non-click which is a rare evidence for us to proof that the non-click method can be applied to a commercial website. This site works amazing well in their non-click interface and our group are quite impressed about this site. This site was developed by Japanese for the Yamaha Corporations, which is a huge musical instruments industry in Japan. Our group found this site to be good in navigation, good in usability, clean and appealing looks and the whole non-click interactions fits the theme well. The animation for navigation system are simple, not as fancy as the “DontClick” site, does not require advance coding skills to develop these interfaces, but it provides suitable userback while activating and the animation play smoothly which is related to one of our goals for our demonstration site. This site had become a role-model site for us and our group also developed several ideas which were based on this site. However, due to late findings and time limitations, our group had not performed a user-test specially done for this site. Our group only consider this site as an appealing and usable site based on our group’s judgement.

Saturday, October 6, 2007

Activation method...gesture or timer?

By the way, I've also did a few research on the activation method. However, I still don't have the skill to code gesture activation, but I can still try out the time trial method.

The “Dontclick” site also introduced three different activation methods which replace the mouse clicks. These methods had been analyzed by the Institute of Interactive Research, and include some of our reviews:

Activation by gesture, wiping left and right:

Description - Activating the button by wiping the mouse pointer from the left side of the button to the right side or vice versa.

Good - It is an easy activation method controlled by gesture. The user does not have to use too much effort on hovering the mouse.

Bad – The chances are high that the user may accidentally activate the button unintentionally.

Activation by gesture, circling the button:

Description - Activating the button by circling the mouse pointer closely around the button.

Good - Another quick and easy way to activate a button with mouse roll-over. Not only the user does not have to use too much effort on hovering the mouse, but also prevents the user from activating the unwanted selections.

Bad – The activation is not obvious, and can be troublesome for certain user. The user must be taught before using this kind of activation method.

Activation by timer:

Description - Simply roll-over the mouse to the button, wait for the timer to expire and it will activates the button automatically.

Good - Also an easy way to activate a button also allow the user to hovering through the selections and activating the unwanted buttons.

Bad - If the design is not well done, it can slow down the user’s navigation which may annoy certain people. The design must get a good balance between users’ patience and the activating timer, or else it will provide a bad usability.

Monday, October 1, 2007

Interface analysis from "DontClick"

However...I've done several research about the non-click interface in that "DontClick" site. At the moment, these are the existing interface I've found in an existing site. What a shame is that I can't find any commercial site as a prove. I'll keep finding them.

Anyway...here ya goes:

Dropdown menu modified:

Located - In the main menu section

Description - It looks like a normal dropdown menu. However, it had been modified for proper mouse roll-over interaction. After one of the selections in the main menu which had been roll over, a series of selections will be appeared like a normal dropdown menu. The difference is whenever a selection had been selected, that selection will be enlarged and appeared to be like a main content area. The selections bellow that area will be pushed down.

Good - Innovative to save space and to show the content, a different way to do dropdown menus, and Looks cool, too.

Bad - A lot of people blame the bad usability about the “Dontclick” site is mainly referring to this interface. Because of the content area will push the rest of the selections, several people may find troublesome to shift their mouse. Moreover, the interface will change whenever the user accidentally rollover to something and activates the animation process which may not the user’s intent to see that certain content. It was also said that lots of the people may get confused by the interface which will move around.

List menu with GO:

Located - Explore > The Button Lab

Description - Looks like a normal menu with a list of selections, but enhanced with the roll-over function. Whenever a selection had been roll-over, a “Go” selection when pop out from aside, allow the user to choose to view the content by roll-over the “Go” again, or just ignore it.

Good - A great way to activate a button with mouse roll-over in a cheap way, easy to create them, works great for the menu with lots of selections within it.

Bad - Have to roll-over twice, not a significant usability problem, but some user may be disappointed on not getting a fast navigation from a non-click interface. This interface may not support a submenu within the menu directly. Not a great choice for main menu type interface. Some user may forget to roll-over or do not even recognize to roll-over the “Go” button, and as a result, the content is not activated. However, this problem can be solved with a good design.




Pie Like menu:

Located - Learn > The Click Ergonomy (This menu does not look like a pie menu but it acts like one.)

Description - Works like a normal menu except the selections do not appear to be a list but a round instead. As a result, it is called as a “Pie Menu”. The one in the “Dontclick” site does not have any special mechanism in that pie like menu. All the user need to do is to rollover the selection and the content will pop-up within the selection or outside the selection (Not the DontClick site).

Good - A much better way to navigate with mouse-rollover compare to the listed ones, which may rollover several unwanted selections. It is also argued that the listed menu can still be navigates properly if the user can be extra careful when rolling over a selection. However, the pie menu can reduce more time and effort since the user can worry less about activating the unwanted content accidentally.

Bad - This type of interface is only suitable for a menu which contains a few selections. It is an interface which may takes up lots of space. The more selections the more space will be taken away from the content area, especially when it comes to a menu with a submenu within it. If a pie menu contains a great deal of selections (approximately over eight selections), the menu itself will look cramped. However, this problem can be solved be increasing the pie area or reducing the size of the fonts, but they also create problems like taking up too much space or selections make it hard to view and to navigate.




Combination of Pie and List menu:

Located - Communicate > The Links

Descriptions - It still looks like a normal list menu, but whenever the user rollover a selection, a pie submenu pops out from the main menu. This kind of interface in the “Dontclick” site includes only three main selections which contains a even more selections in it’s submenu. The three selections fit in a circle and give a unique looks for an interface.

Good - A really unique way of making a main menu with submenus looks good if the interface is well-designed. It can contain more selections and it reduce the chance of causing of the original pie menu’s spacing problem and list menu’s navigating problem.

Bad – However, even though it solved both the pie and the list menu’s major issues, but it does not mean that it totally get rid of those issues. If this interface is not designed properly, it may result even crowded interface and the navigation will be even harder due to more selections. The designers have to be extremely careful when they design this type of interface. The outcome may be extremely good or extremely bad since it can solve the pie menu and the list menu’s problem or it can combine both of them into a big problem.





After 3 weeks...yet no comments from anybody which is annoying. Yeah yeah everybody is busy I've heard this excuse again and again. Writing this blog is such a waste of time. I rather just put stuff in my Word document.

Wednesday, September 5, 2007

Oh, by the way...

I felt silly to spent these silly time on writing these silly blog since nobody will be that silly enough to comment silly things in my silly blog.

Been busy writing project plan and developing prototype...

As a result, I nearly forgot about the blogs. However, I'll try to catch up and talk about what I've been doing recently.

1. Project plan.

Yup, I and my teammate wrote a 2700 words project plan which is quite amazing to me. We've presented our draft before we hand in our final version. In my opinion, if I know how to release stress during presentation, I can do a much better job than that day.

We know that we have to keep the time limit, but 3 minutes is just impossible to cover up everything. So, the trick is find a balance between content and timing, which we basically have to talk something in detail but within the time. However, I seriously doubt that it is impossible to cover up details within 3 minutes. Why? Just take a look at everybody's presentation and you'll understand. How many people actually keep in the time limit. If people can actually present bellow 3 minutes, I doubt that they worked hard on their assignment.

However, what is done is done. Seems like everybody is happy. So, I'm happy...



2. Low-fidelity Prototype

Hmm...still remember that day when most of the people just can't be bother to go to the lecture. Unlike other people who is intellgible, I'm a dumb so I attend the lecture. Yup...I've declared thata low-fidelity prototype will be done after this week.

Anyway...Flash should be shot since it wouldn't allow a rollover within another rollovered interface, which is crap and nearly killed our entire project. Luckly after a series of hardcore research, I've finally found a way to get around it. Instead of using "rollover", it use "onEnterframe" with "hittest" function (Something like...hmm...I assume is mouse collusion)

After dealing with the stupid rollover issues...the rest seems to be easy. I'm also amazed that all I need to do is to change slightly a bit of the existing non-click interface and will make people's life easier. However, I still have to prove my concept by doing user testing.

iMac site is strangely easy to modify. There are only 2 main different ways to design the interface inside the website. Shouldn't be too hard to make. I've done like 80% of the low-fidelity prototype within a few hours. After is done, I'm going to do user testing right away...

Bellow are some of my research which had been done recently:

News:

http://www.macrumors.com/2007/04/12/apple-patent-application-for-button-less-mouse-design/
http://www.appleinsider.com/articles/07/04/12/next_gen_apple_mouse_may_dump_scroll_ball_for_touch_housing.html

Reviews:

http://weblensblogs.blogspot.com/2006/04/dont-click-it-interface-breakthrough.html
http://looksgoodworkswell.blogspot.com/2005/11/musings-on-mouse-hover.html

Issues:
http://board.flashkit.com/board/showthread.php?threadid=588678

Cool Programs:
http://www.altia.com/products_photoproto.php

Wednesday, August 22, 2007

Right, having a huge brainstorm on Monday, we finally got something. However, we still have no idea what to write for our planning report...until a secret criteria sheet was discovered on the MMDS3802 site on Wednesday. So, typing time.

I've made a timeline so we will be able to mark out our process, when do we have to finish this step, by what time we have to complete this task...etc? However, our timeline can still be flexible so if we finish some steps earlier than the timeline, we will continue to proceed to the next step.

By the way, this timeline is not finalised, it will be done really soon...
Week 1 starts from August 20th...

Week1

Write up the Project Plan.

Week2

Prepare for Project Plan Presentation.

Week3

Research on the existing non-click site.

Week4

Analyse the research.

User testing on some chosen site.

Week5

Brainstorming, finding solutions.

Initial design for the prototype

Week6

Developing the prototype.

Week7

User testing on the prototype

Prepare the presentation

Week8

Refining the prototype

Week9

Keep on refining the prototype

Prepare for the final presentation

Monday, August 13, 2007

Project planning

Most of the people are doing individual works, but I still keen on find somebody as assistance. So, Hikaru just sat next to me. According to my experience working as a team with him, he is reliable and he does work hard. So, thats how we form into teams.

Both of us agree on making website, but our website is not like other site. It is a site without any clicks. I thought it would be easy to built and to justify, but after talking to Ralf, crap...not that easy as it sounds.

I have to be particularly aware of gestures and the usability of the site, since this method on navigation is unusual for most of the people. Even though the world keeps on changing, but human sometimes just dislike changes. So, I have a challenge to re-make the site for "Imac" into a non clicking interface.

Bellow is some of my research for gesture:


http://ict.ewi.tudelft.nl/index.php?option=com_sections&id=56&Itemid=120
http://www.gentlemouse.com/
http://www.dailymail.co.uk/pages/live/articles/technology/technology.html?in_article_id=468265&in_page_id=1965


This is gestures made in Flash:

http://digg.com/gaming_news/Flash_gesture_recognition_online_Pong_game_(requires_webcam)
http://drawk.wordpress.com/2007/05/20/as3-mouse-gesture-recognition/
http://www.katylilley.co.uk/