Wednesday, October 29, 2014

Design and Appeal : How Can I Increase the Appeal of a Design?

Greetings fellow Designers!

This week we will learn about Design and Appeal.

Design and Appeal consists of six components namely:
(a) Aesthetic-Usability Effect
(b) Archetypes
(c) Entry Point
(d) Mimicry
(e) Colour
(f) Exposure Effect

The followings are the explanations and examples for each component.

1. Aesthetic-Usability Effect
   (a) Aesthetic: a branch of value theory which studies sensory/sensory-emotional value.
   (b) Aesthetic designs are perceived as easier to use than less aesthetic designs and it
        gives pleasure to the user.
   (c) There are four types of pleasure:
        i. Physio-pleasure - derived from the sense of smell, touch or sensual.
           Example : The softness of a teddy bear that gives the feeling of calmness when 
                           sleeping.
                                               


               
        ii. Socio-pleasure - pleasure gained from interaction with others.
            Example : A product that represents a social grouping, for example, UNIMAS shirt.

      iii. Psycho-pleasure - pleasure from the satisfaction felt when a task is successfully 
                                      completed.
           Example : The product makes the task more pleasurable, such as the printer.
               

     iv. Ideo-pleasure - pleasure derived from entities such as books, art and music.
                                 This is the most abstract pleasure.


* All in all we can conclude that users will perceive the design positively if it is more 
  aesthetic. A less aesthetic design will experience lack of acceptance even if the 
  usability is high.


2. Archetypes
    *Archetypes are universal patterns of theme and form resulting from innate biases or
     dispositions. It conveys messages that verbal and written information cannot do. 
     For example, Bata for comfort and Voir for elegance and style.



3. Entry Point
 * A point of physical or attentional entry into a design. It influences perception, 
   attitudes, and interaction of users.
* Consists of 3 elements :
  (a) Minimal barriers - examples of barriers  to entry are highly trafficked parking lots,
       or salesperson standing at the door of retail stores.
  (b) Points of prospect - Allows people to become oriented and clearly survey available 
       options. This includes store entrances that provide a clear view of store layout and
       aisle signs, or websites that provide good orientation cues.
  (c) Progressive lures - Used to attract and pull people through the entry point such as
       the headline of a newspaper or an article.

4. Mimicry
  * The act of copying properties of familiar objects, organizations, or environments in 
     order to realize specific benefits afforded by those properties.
  * Consists of three types:
   (a) Surface mimicry : making a design look like something else.
   (b) Behavioral mimicry : making a design act like something else.
   (c) Functional mimicry : making a design work like something else.

5. Colour
 *Colour is used in design to attract attention, group elements, indicate meaning, and 
  enhance aesthetics.
Example:
Umbrella 1: More attraction because it is colourful.
Umbrella 2: Less attraction because the colour of the umbrella dark.









Sunday, October 12, 2014

Unit 6: Design and Usibility – How can I enhance the usability of a design?

According to the Universal Principles of Design by Lidwell W., Holden, K., & Butler, J., (2003)...

Constraint 

·         “ a method of limiting the actions that can be performed on a system”..

Cost Benefit

·         “ an activity will be pursued only if its benefits are equal to or greater than the cost”..

Visibility

·         “  the usability of a system is improved when its status and methods of use are clearly visible”..

Progressive Disclosure
·         “ a strategy for managing information complexity in which only necessary or requested information is displayed at any given time”..

Iconic Representation

·         ” the use of pictorial images to improve the recognition and recall of signs and controls”..

Wayfinding
·         “ the process of using spatial and environmental information to navigate to a destination”.


Constraint

Possible action that can be performed on a system is limited therefore, the design is easy to use and reduce the probability of error during interaction. Constraint is needed in design to simplify usability and minimize the error. There are 2 basic kinds of constraints which are the Physical Constraint and Psychological Constraint.

(1) Physical constraint

Physical constraint can limit the range of possible actions by redirecting the physical motion in specific ways. It also can reduced the sensitivity of controls, minimize unintentional inputs, and prevent or slow dangerous action. There are 3 kinds of physical constraint that are path,  axes and barriers.

(a) Path
The forces for path constraint are converted into linear or curvilinear motion using channels or grooves. Path constraint are useful in controlling the variable ranged that is relatively small and bounded. There are two examples for path constraint.

Picture 1: Curtain Holder


This picture was taken from an online magazine called "Impiana". The curtain holder that is labelled in the picture use the path constraint because the curtain is only can be moved left or right. The forces that are used to change the direction of the curtain is transferred into the linear motion.



Picture 2: Zip for the Pencil box

The picture of this pencil box is own by me. The pencil box zip that are labelled in the picture also uses the path constraint. The user have to pull the zip backwards or upwards to open and closed the pencil box. The forces that are applied to open and closed the zip are transferred into linear motion.

(b) Axes
The applied forces in the axes constraint are converted into rotary motions that provide effective control surface of infinite length in a small space. Axes constraint also useful in controlling the limited real estate, control large variable or  unbounded.


Picture 3: Iron Controller

The picture of this iron is own by me. The iron controller plays an important role to control the heat needed to iron different fabrics. The applied forces convert into rotary motion and providing a control surface of infinite length in a small space. The iron uses axes physical constraint because, the temperature of the iron is controlled in a rotary motion. 

(c) Barriers
The applied forces is absorb or deflect by halting, slowing or redirect the forces around barriers. It also useful in denying errant or unwanted/undesired actions.


Picture 4: Key and Door Knob

Based on the Picture 4, the key and the door knob were labelled in the picture. The key is design in such way so that, the key can be used to open the door knob if the door knob is locked. This design is useful especially for safety. If the key is twisted like in the right picture, the key does not fit the door knob thus, the locked door cannot be opened. 

(2) Psychological constraint

There are 3 kinds of psychological constraint that are the symbol, conventions and mapping. Psychological constraints can limit the range of possible actions by leveraging the way people perceive and think about the world. The psychological constraint also can be used to improve the clarity and intuitiveness of a design.


(a) Symbol
Symbol can influence the behavior by communicating meaning through language in terms of text or icon. Symbol also useful for labeling, explaining, and warning using visual, aural and tactile representation.



Picture 5: Warning Symbol (no foods and drinks)

This symbol was found in front of Lab at Level 1, FCSHD. This symbol was used to give a warning to the students. The student must not eat and drinks inside the Lab. This symbol is used as a kind of communication using the text and icon.


(b) Conventions
Conventions can be used to influenced the behavior based on learned traditions and practices. It is also useful in making the systems consistent and easy to use.


Picture 6: Pedestrian cross
The pedestrian was found in front of the BHEP. The pedestrian was used by the people to cross the road. The driver should not drive fast along this area.


(c) Mapping
Mapping can influence behavior based on perceived relationship between elements. It is also useful for implying possible action based on visibility, location and appearance control. 

Picture 7: Touch pad and Mouse

The touch pad for the laptop and the mouse that were labelled in the picture was using the mapping principles. The touch pad and the mouse has a relationship between those two design. The user can either choose to use the touch pad or the mouse. Both design have the same functions. 


Cost Benefit

The cost-benefit principle is used to assess the financial return associated with new features and elements (design perspective). The design is poor if the costs associated with interacting with a design outweigh the benefits. However, the design is good if the benefits associated with interacting with the design outweigh the cost. The consideration of the cost-benefit principle in all aspects of designed is important. The decisions based on cost parameters alone cannot be made without thinking about the consideration of the benefits realized from the interaction.

  • If Cost is higher than the Benefits = Poor design
  • If the Benefits is higher than Cost = Good design


Picture 7:  Advertisement from Zalora Online Shopping

This is an advertisement of Zalora Online Shopping. They influence the user that there were a discount about 20% off if the user purchase from them.

Visibility

Status and methods of use that are clearly visible improve the usability of the system. System usable when they clearly indicate its status, possible action that can be performed and the consequences of action once performed. The principle of visibility is based on fact that people are better at recognizing solutions when selecting from a set of options rather than recalling the solutions from the memory. 


Picture 8: Visibility of the design for Mobile that indicates for charging state.
The status for the design of the product can be seen because the product itself indicates its own status to the user. Based on Figure 8, the visibility principle is applied in this design of the mobile. As we can see in the labelled picture, the system of the products itself indicates that the product was in a charging state. 

Progressive Disclosure


A strategy of separating information complexity and only presenting the information that are necessary or relevant. The information is separated into multiple of layers and only presenting the necessary information.  The progressive disclosure is primarily used to prevent the information from being overloaded, employed in computer user interfaces, instructional materials and the design of physical spaces. It keeps the display clean and uncluttered thus, helping people manage the complexity. The use of progressive disclosure gives benefits toward learning efficiency. It is also used in physical world to manage the perception of complexity and activity. Novice or infrequent users that use the design can get the advantages of using progressive disclosure because the information complexity is reduced. 

Example: Bank Islam mobile application.

As we can see in each picture, the Bank Islam mobile application is using the progressive disclosure principles. The information given to the user is separated into layers. 


Step 1: Enter the password and click OK.






Step2: Tap on the Prepaid Top Up.





Step 3: Tap on CELCOM.




Step 4: Tap on Airtime 10.





Step 5: Enter mobile phone number and click OK.







Iconic Representation


Using pictorial images to make actions, objects and concepts in the display easier to find, recognize, learn and remembered. These iconic representations are used in signage, computer displays and control panels. It also can be used as the identification, serve as space-efficient alternative to text or draw the attention of an item in informational display.  The iconic representation also reduce the performance load, conserves display and control area. It also makes the signs and controls understandable across cultures. There are 4 types of iconic representation; (a) Similar, (b) Example, (c) Symbolic, and (d) Arbitrary. 

(a) Similar
Icon that use images that represent an action, object or concept. It is effective in representing simple actions, objects or concepts and becoming less effective when the complexity increases. The representation is simple and concrete.



Picture 9: Exit signage.


(b) Example
Icon that used images of things those exemplify or commonly associated with the actions, objects or concepts. It is effective at represents the complex actions, objects or concepts. The representation is complex.

Picture 10: Girls toilet room signage.

(c) Symbolic
Icon that use images that represent the action, object or concept at higher level of abstraction. Symbolic is effective when actions, objects or concepts involve well-established and easily recognizable objects. The representation involve established and recognizable symbol.


(d) Arbitrary
Icon that used images that bears a little or no relationship to the actions, objects or concepts. Hence, the users have to learn the relationship of the arbitrary icon. Arbitrary is used when developing cross-cultural or industrial standards that used in longer period of time. Therefore, the people or the users have sufficient exposure to the icon to make it as an effective communication. The representations are used to be as standards.



Wayfinding

The process of using spatial and environmental information to navigate to a destination. There are 4 stages of basic process of wayfinding; (a) Orientation, (b) Route decision, (c) Route monitoring, (d) Destination recognition.





(a) Orientation

The orientation is determining one's location nearby objects and destination. It used landmarks to improve orientation. Landmarks provide strong orientation cues and locations that easily remembered identities. Signage is one of the easiest ways to tell people's location and direction.





(b) Route Decision
Choosing the route to get to the destination. Route decision-making can be improve by minimize the number of navigational choices hence, providing the sign and prompts at decision points.




(c) Route Monitoring
Monitoring to the chosen route to confirm that it leads to the right destination. Route monitoring can be improved by connecting the location with path that have clear beginning, middle and ends.





(d) Decision Recognition
Recognizing the destination. Decision is used to improve the destination recognition, use the enclosed destinations such as form dead-ends or barrier to disrupt the flow of movement through the space. The destination must be clear and consistent identities.





Monday, October 6, 2014

Cognition and Learning: How can I help people learn from a Design??



Greetings future Designers,

 

Weeks 5 lecture summary..


According to the Universal Principles of Design by Lidwell W., Holden, K., & Butler, J., (2003)

Chunking is a technique  of combining many units of information into a limited number of units or chunks, so that the information is easier to process and remember.

Classical Conditioning is a technique used to associate a stimulus with an unconscious physical or emotional response.

Operant Conditioning is a technique used to modify behavior by reinforcing desired behaviors and ignoring or punishing undesired behaviors.

Serial Position Effects is a phenomenon of memory in which items presented at the beginning and the end of a list are more likely to recalled than items in the middle of the list.

Picture Superiority Effect refer to a picture can be memorize better than word.

Forgiveness refer to a design should help people avoid errors and minimize the negative consequences of errors when it happen.


more on the Principles....



1. Chunking.
    The term chunk refers to a unit of information in short-term memory e.g. strings of letter, a word, or a series of numbers. Information will be converted into a small numbers of unit to be efficiently processed by short-term memory.
     A design that applied chunking will simplify it but by applying chunking into a design is a misapplication of the principle as it is originally a task involving memory.
     Chunking usage is to recall and retain information also can be used to solves problems. The information that being searched or scanned unable to chunked.
      In an environment that has lot of distractions, chunking can be used in this situation to display information.

Figure 5.1 My mother battery box

2. Classical Conditioning.
     In design, this principle is used to influenced the appeal of a design or to influence specific kind of behaviors. A design that being pairs repeatedly with a stimuli will condition an association over time.
E.g. A stimuli that causes pleasure/pain or give positive/negative emotional response (sound, images,experiences, physical contact etc,)





 












Figure 5.2 Mc'Donald

3. Operant Conditioning.
     In design context, this principle observes whether behavioral changes are needed. A positive and negative reinforcement should be focused rather than punishment. In early training phase, a fixed ratio schedules is important as basic behaviors is mastered then proceed to another reinforcement.

Buy 1 free 1 ticket for GSC when pay with Citibank (according in the Citibank website)



4.  Serial Position Effect.
      This effect happen when people try to recall items from a list. The items at the beginning and at the end are better recalled than the items in the middle. The improved recall for items at the beginning af a list is called a Primacy Effect while the improved recall for items at the end of the list is called a Recency Effect.


Figure 5.4 A list of Fruit Family in Cognitive Science Orentation

4.1 Primacy Effect.
      The initial items in a list are stored in long-term memory more efficiently than the items later in the list. Stronger primacy effect happen when the item in the list is slowly presented as there is more time to store the initial items in long-term memory and weaker primacy effect happen when the items in the list is rapidly presented as there is less time to store the initial items in the long-term memory.\

4.2 Recency Effect.
       The last few items are still in the working memory and still readily available. It is not affected by the rate of the items presentation but affected by passage of time and an additional information.

       In design, for visual stimuli , the items that presented early in a list have the greatest influenced. They will be recalled better but it will influenced the interpretation of the later items. Auditory stimuli however, the items late in  a list will have a greater influence. These effect also describe a general selection preference known as Order Effect; the first and last items in a list are more likely to be selected than items in the middle.Therefore, the important items should be presented at the beginning or at the end of a list in order to maximize recall.

5. Picture Superiority Effect.
     Picture are generally more easily recognized and recalled than words. This principle is commonly used in instructional design, advertising, technical writing and other design contexts that require easy and accurate recall of information. This affect will apply when people are asked to recall something more than 30 second from time of exposure and the strongest is when the picture represent a common, concrete things vs abstract things. The effect will diminishes as the information become more complex. The usage of this principle is to improve the recognition and recall key information.


E.g. The picture of each troop in the Clash of Clan online game.

6. Forgiveness
     Forgiving design provide a sense of security and stability, which in turn will foster a willingness to learn, explore and use the design. The common strategies for incorporating forgiveness in design are:

6.1 Good Affordances.
      The physical characteristics of the design influence it correct usage.
       E.g. The Nokia and Asus cable is different.  Nokia cable cannot be use on Asus. 
(Photo source: Own phone and friend phone)



6.2 Reversibility of Actions.
       One or more action can be reversed if an error occurs or the intent of the person changes.


E.g. The player can cancel the training of the troop in Clash of Clan by pressing the cancel button.

6.3 Safety nets.
       Device or process that minimizes the negative consequences of a catastrophic error of failure.



 E.g. The Windows 7 and 8 Bluescreen. It's a process automatically generated by the system when there is a error occurred internally and to prevent further damage t the system. (Photo source: Own PC and friends PC)



6.4 Confirmation.
       Verification of intent that is required before critical actions are allowed.
      


Figure 5.1.2 The famous Android/iOs online game, Clash of Clan. Before removing the troops there is verification whether the player really want to remove the troops.



6.5 Warnings.
       Signs, prompts or alarms used to warn of imminent danger.
       E.g The beeping sound in certain vehicle tell the user need to wear safety belt. (Photo source: Friends car)



6.6 Help.
      The information's that assist in basic operations, troubleshooting and an error recovery.
       E.g. A troubleshooter will pop up when there is software failed to respond in pc. 



**********