Week 7 - Information Design vs Visual(Interface) Design

A tidbit of information ...

What is the difference between courseware and web based?

Courseware (CD ROM based) - Flowchart has START to END
Website - There is NO START, NO END, it is all about user control

Information design
- it is all about Learning Strategy
- FOCUS FOCUS FOCUS!
- Focus on the purpose of the website, adopt the necessary plan to achieve that purpose

Side Note..
What is Authentic Learning?

Storyboard vs Thumbnails?

Simple answer:
A thumbnail is just one, single rough sketch, or a reduced size version of a full sized image. 

A story board shows a sequence of drawings, indicating a series of events. A storyboard CAN be made up of a series of thumbnail sketches.

Detailed answer:
Thumbnails are reduced-size versions of pictures, used to help in recognizing and organizing them, serving the same role for images as a normal text index does for words. In the age of digital images, visual search engines and image-organizing programs normally use thumbnails, as do most modern operating systems or desktop environments, such as Microsoft Windows, Mac OS X, KDE, and GNOME. 

Storyboards are graphic organizers such as a series of illustrations or images displayed in sequence for the purpose of pre-visualizing a motion picture, animation, motion graphic or interactive media sequence, including website interactivity. 

For me, after the lesson thought, Information design is the most important design component compared to interaction and interface design. Information design is the what makes a specific website a hit or a flop.  Developers should pay a lot of their attention to focus on this aspect.  

Week 6 - Interaction Design

Hu hu.. class is postponed. Dr. Dayana is not well. Luckily a friend send a SMS  right before speeding towards UTM.. he he .. no lah.. well... kind of..

p/s  shhh don't tell my husband

Self Learning : Review the published online notes..

INTERACTION DESIGN

- one of the major three design components - Interface, Interaction, Information
- keyword  :   interactivity
- keyword  :   navigation
- keyword  :   user control

A good interaction design - one of the deciding factor of a successful website

Week 5 - Basic Web Design (Good Website vs Bad Website)

Today, our lesson is about attractive websites..

A bit of comparison on previous and current websites

Previous

• Large Banner
• Hypertext
• Large Font
• Static Banner
• Colourful Display

Current

• Simple banner
• Hypermedia
• Small Font (10 - content, 12 heading)
• slide banner
• white background

Dr. Dayana described on a new trick to display a large picture on the website while maintaining upload time.  "Break the picture into several smaller parts.  On the webpage, combine the display"
There you go, large picture, short downloading time. Interesting!!

What is interesting about apple.com?

Me:  Attractive sliding iphone display

What is navigation breadcrumb?
Me: You cannot depend solely on me.. search the internet  :)

What is white space on the web page?
You: The white background
Me: Wrong!! It is the unutilized empty space on your website

Lecture: A Good Website Design
-----------------------------------
A good web design have
- quality content
- good technology
- good visual
- good economic (purpose)
- well structured
- easy navigation
- quick download time
- has balance
- has contras
- has focus
- is related

We searched the web for examples of good vs bad websites. Really there were tons of good websites and tons of bad websites..

Generally, I feel that the older designed websites lack focus, they tend to be excited on the web building tools rather than focusing on the purpose of the website.

The newer website concentrate more on the purpose, applying simpler display, ie white background, restricting the site to two or three colours only and emphasizen more on the economic (purpose).

Week 4 - Project Management in Web Design and Production

As usual, at the start of class, Dr. Dayana reviewd our knowledge on the learning theories and the related components about learning.

An education website should have

1)      Learning Strategy
2)      Learning Theory

A few Proposed Learning Strategy
1)      Inquiry based learning
2)      Problem Based Learning
3)      Cooperative Learning
4)      Collaborative Learning
5)      Personalized Learning
6)   Authentic Learning

 

Inquiry Based Learning

4 Basic Step
1)      Situation trigger
2)      Create Hypothesis
3)      Explore
4)      Create Conclusion

Learning Theories
1)      Behaviorist
2)      Cognitive
3)      Constructivism

*side note - White Background is the current trend for websites*

Collaborative vs Cooperative

Collaborative
-  The group is heterogenous
- Smart and less smart people
- Various background
- Has facilitator
- Scaffolding – make sure everybody participates..

Applying collaborative learning on a website

-          - Answer a few short question

-          - Same answer respond cannot be in the same group

Problem Solving vs Problem Based Learning

Problem Solving – eg. Math

Problem Based Learning – A Situation  that requires learning takes place

Group Presentation
1) Cooperative Learning
2) Problem Based Learning
3) Game Based Learning
My group presented cooperative learning...

Lecture - Project Management In Web Design

3 Phase Design
1) Interface Design / Visual  ==> Storyboard
2) Interaction Design / Interactivity  ==> Flowchart
3) Information Design / Content

Two types of testing in Web Design
1) Alpha Testing - Formative
2) Beta Testing - Summative

Alpha Testing - Test on Developer's Part
Beta Testing - Test on User Part

No wonder I have never heard of Microsoft's Alpha Testing.. :)

I think this class is really useful. I had deeper understanding to clarify the confusion between problem based learning and the problem solving. Although their differences are not clearly highlighted, they are two separate entities that need to be differentiated. The same confusion applied to collaborative versus coopeative learning... Well, as they said, when you learn more, the more you realized that your knowledge is limited...

THAT is why I attended this class, right Dr. Dayana and Dr. Affandy?