Project reflection

In the my February's post of "My Group and our Project Topic (M.I.D)", i explained about the topic which is introduction to DSLR camera. I was assign to take over 'accessories' subtopic. Each group needed to do 2 times presentation.. well as for the 1st presentation, which we do pretty well, thats what we thought so, we received feedback from our classmate. As for my topic here are the feedback;

* to many page to click in order to find the solution (i thought many page will shows how hard i work?lol)
* how can user know where they are?
* the answer in forum views is very limit 2 answer per page only(i thought this will avoid user to scroll to much), user might have slow connection, would burden the user to find out the answer
* add some media would be good


Thanks for very useful feedback, i upgrade my subtopic to following;

* I reduce some pages by rearrange and combine the data in as less page as possible
* I add topic path or bread crumbs navigation in every page so that the user can know where they are. (to know more about bread crumbs or topic path http://www.motive.co.nz/glossary/breadcrumb.php)
* I edit the coding PHP to allow to view 10 answer in one page (learn to make simple PHP forum http://www.phpeasystep.com/phptu/12.html)
* i add drag and drop behavior as reflection or activity of learning

Dear my group mates, a special thanks for giving the best cooperation as a teamwork, solve obstacles together, sharing the joy after last presentation, i really appreciate that. Not to forget our humor yet charismatic Prof. Dr. Jamalludin B. Harun in teaching and learning session as well as guiding all of us throughout the class period.Thank you Prof.! Jasamu dikenang. Last but not least, Happy Learning ppl!;-)

Web Publishing

(click on the image for large view ;-))

suggested reading of web publishing;

http://www.thesitewizard.com/archive/findhost.shtml

Web Testing & Evaluation

I summarized the class note to following (click on image to view large size);

Interface Design/ Visual Design

Its human nature judging a books by its cover, judging a person by their looks, judging the site by its looks or visual appeal of the design. If looks or design is not important, there will be no MNG, Guess, Prada, or this site(http://www.webpagefx.com/best-web-design-company.html) won't even exist! See. How great the looks influence the people! That is why we need consider several general issues in visual design which is(there are many and many more but i only discuss 2 kinds only hehehe.. );

typography:
The design and use of typefaces as a means of visual communication from calligraphy to the ever-developing use of digital type is the broad use of the term typography. In general usage typography is the practical and artistic arrangement of type and printing with type.
Terms Related to Typography;
Text Composition:It involves manipulating text placement and altering the visual appearance of the text.Also know as text layout. Example of tricky text composition;


Typesetter: It is the job of the typesetter to make sure all the correct typefaces and specific fonts are used throughout the document with all the text properly arranged. Also known as text setter.

Typographer: Traditionally, the typographer was someone with specialized knowledge about typefaces - whether or not they were actual type designers - and about the entire field of typography and printing. The typographer chose the typefaces for books and other printed matter then the typesetter would use those type specifications to set the type.

prototype:
Web prototyping or rapid web prototyping, as it’s sometimes called, is the process by which a web-based model of the end product is constructed for the purpose of outlining how a website or web application will look and behave. In the world of web prototypes the process of developing a prototype might be more important than the end product.The web prototype, whether it’s on a whiteboard, paper and online is a test site that will include some content, all primary navigation and possibly images and key functional elements.

site that offer technique for button design;
http://www.webpros.tv/respect/common-elements-used-in-interface-button-design/


Suggested Reading of Interface Design;
http://www.edtech.vt.edu/edtech/id/interface/index.html
http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/
http://photoinf.com/General/Robert_Berdan/Composition_and_the_Elements_of_Visual_Design.htm

Interaction Design

In previous post i discussed about information design,i would like to highlight the learning strategies, in which i choose Problem Based Learning (PBL). Each type of strategy have their own characteristic. Those characteristic should be as logical organizing principle. Same as previous example, to get a shape like body-builder, we need strategy , which is exercise, healthy diet and so on. That will be the strategy. But how make it work? In term of healthy diet, less sugar, no fat, no cholestrol and so on(the principles). In term of exercise (PBL), jogging, cycling, swimming and so on(the principle).But we need to choose a right activity for a right purpose. jogging would not work effectively, go to gym and work with the sport equipment that will enforce muscle enlargement at certain part of body will effectively work.In fews month, pop! You got the shape! Same goes to in web context, we have the PBL principle but how to make it work? The process of question and answer to make it work is called interaction design. We turn the information into an experience, there are three element of interaction design which is;

1) organization (How info will be organized);


(Interaction design-organization: Dr. Jamalludin)

2) Navigation (How people find the way around);

Things that you should consider in web navigation;
a)Accessible
The navigation of your site is possibly the most important part of any given page. So it should be as accessible as you can make it. This means avoiding special effects like Flash, Java, or JavaScript as your only navigation method.
b)Meaningful
Keep your navigation meaningful. Make the links clear - don't try to get cute or use terms that are internal to your organization. Someone who has never been to your site before should know immediately where the link will take them.
c)Understandable
If you want to use images for your navigation, make sure that there is some text associated with them. " Mystery Meat Navigation" is the use of non-descriptive images as navigation, and it's much more common than you might think.
d)Prevalent
Your navigation should appear on every page of your site. While you don't need to have identical navigation, the basic structure should be the same throughout the site, with changes used only to indicate location within the hierarchy.


3) Interactivity (What control users can work with)

Web Interactivity Examples
Interactive Webbing: forms interfaced to CGI programs
Web Interactive Talk: threaded discussion stored on a server
Web World: a cooperatively-constructed hypertext
WebChat: real-time interaction via web pages
http://www.hongkiat.com/blog/importance-of-web-interactivity-tips-and-examples/

In summarized, we give users well-marked roads and landmarks, then let them shift into four-wheel drive. Organization will be the well-marked roads, when we on journey to go from one place to other place we have the marked-roads to get the right way and the best way to reach the place. Navigation will be the signboard, we know where we are, where we can go, and what road to take back. While Interactivity will be the accommodation and facilities available all along the road, we keep on riding because gas station,seven eleven shop, road light is available.


Suggest Reading of Interaction Design;
http://webdesign.about.com/cs/webnavigation/a/aaeffectivenav.htm
http://www.jimthatcher.com/webcourse4.htm