Discipline: Cognitive Load Theory

cognitive load theory breakdown

COGNITIVE LOAD THEORY (CLT)

Is an instructional theory that starts from the idea that our working memory is limited with respect to the amount of information it can hold, and the number of operations it can perform on that information. That means a learner should be encouraged to use his or her limited working memory efficiently, especially when learning a difficult task.

 

cognitive load theory

We need to recognize the role and the limitation of working memory to help develop quality instruction. Thus, we as instructional designers need to find ways to help optimize the working memory. Hence, the key aspect of the theory is the relation between long-term memory and working memory, and how instructional materials interact with this cognitive system.

  

Discipline: Content Inventory

Example of inventory

CONTENT INVENTORY
Is the process and the result of cataloging the entire contents of a site. An allied practice—a content audit—is the process of evaluating that content


Example of inventory

A content inventory typically includes all information on a site, such as web pages (html), meta elements (e.g., keywords, description, page title), images, audio and video files, and document files (e.g., .pdf, .doc, .ppt). A content inventory is a quantitative analysis of a site. It simply logs what is on a site. The content inventory will answer the question: “What is there?” and can be the start of a site review.

Discipline: Mediated Reality

Building shown on phone

MEDITATED REALITY
Describes the concept of filtering our vision of reality.


Mediated Reality touch keypad

Reality by seeing what your are looking
at through phone.





Discipline: Page Fold

PAGE FOLD
The fold in web design is the position on a web page where the majority of browsers viewing the page will begin to scroll.

Discipline: Principle of Least Effort

URL example for this principle

PRINCIPLE OF LEAST EFFORT
Concept that an entity, organization, or system tries either to change its environment to suit its needs, or to change itself to suit the demands of the environment - whichever is easier in terms of effort and cost. In other words one either resists or goes with the flow, depending on what one can put in and what it takes.

In web this could include the toolbar or url because this is how we interact through the sites or change which sites we visit.

Discipline: Rules of Play

Rules of Play example

RULES OF PLAY
When design a website it is essential to know what makes up a site. A .html and .css are the bases for a website design.

Discipline: Shannon & Weaver Communication Model

Model explanation

SHANNON & WEAVER COMMUNICATION MODEL
This model is specially designed to develop the effective communication between sender and receiver. Also they find factors which affecting the communication process called “Noise”. At first the model was developed to improve the Technical communication. Later it’s widely applied in the field of Communication.
The model deals with various concepts like Information source, transmitter, Noise, channel, message, receiver, channel, information destination, encode and decode.

Discipline: Touch Target

Touch target example on mobile device

TOUCH TARGET
A touch target is a target on the computer display interactive screen that. The screens are sensitive to pressure.

Discipline: Law of Conservation of Complexity



Concept of the law


LAW OF CONSERVATION OF COMPLEXITYIn human-computer interaction states that every application has an inherent amount of complexity that cannot be removed or hidden. Instead, it must be dealt with, either in product development or in user interaction.


Interactive while viewing photos

Nissan site interactive

Discipline: Ubiquitous Computing

Example of ubiquitous computing

Example of the concept

UBIQUITOUS COMPUTING
An advanced computing concept where computing is made to appear everywhere and anywhere. In contrast to desktop computing, ubiquitous computing can occur using any device, in any location, and in any format. 


Discipline: User Error

User Error Example

USER ERROR
The 404 or Not Found error message is a HTTP standard response code indicating that the client was able to communicate with a given server, but the server could not find what was requested. 



User Error Example

Discipline: Wearable Computing

WEARABLE COMPUTING
Also known as body-borne computers or wearables are miniature electronic devices that are worn by the bearer under, with or on top of clothing.

Button Interaction

Button example shown when active

Button example on website

BUUTON INTERACTION
Listed are examples of interactive buttons.







Examples for ipad and desktop



Responsive Design

Example of Responsive Web Design

RESPONSIVE DESIGN
Is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

Discipline: Sequence and Motion

Example Sequence and Motion
http://www.cmyk08.be/animation-sequence-project

SEQUENCE AND MOTION
The discipline of film and animation (the process of making a motion picture).

Example Sequence and Motion

Discipline: Personas

PERSONAS
Creating personas of website visitors is a powerful technique for helping increase the usability and customer centricity of a website as a part of a user-centered design (UCD) process. Personas are an extremely powerful design tool, which helps you visualize an end-product that you can be confident will suit your users' needs by helping them achieve their goals, and help you test your success.

User personas typically focus on the likes, dislikes, and personality of the user. They include things such as:
-Fictional name and photo
-Age, gender, family status, and other demographic information
-Hobbies
-Attitudes

Discipline: Scanning vs. Reading

Example Scanning vs. Reading

SCANNING VS. READING
By design one scans those with a watchful eye to see what's happening in the lives of family, friends, news, business and so much more. When you scan text, you are looking over it entirely, perhaps in search of something specific. When your read, you generally read parts in extended lengths of text. 

Discipline: Site Map

Site Map Example
https://www.apple.com/sitemap

SITE MAP
A site map is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for Web Design or a web page that lists the pages on a website, typically organized in hierarchical order. 

Discipline: The Pareto Principle

The Pareto Principle Example

THE PARETO PRINCIPLE
The Pareto Principle states that 80% of the effects come from 20% of the causes. This is the basic rule of thumb in business, but can also be applied to design and usability. For instance, dramatic improvements can often be achieved by identifying the 20% of users, customers, activities, products or processes that account for the 80% of contribution to profit and maximizing the attention applied to them.

Take for example a simple UI element like a drop-down list of countries presented in a registration form. Most site developers or content creators recognize that 80% of the time, certain countries will be selected. So although it would seemingly be bad practice for such a long list to break the alphabetizing of the list, the 80/20 rule allows that convention to be broken by putting the most selected countries at the top, as shown in the scree-grab below from Fenn Wright Mansonis checkout page.

Discipline: Signals and Cues

Signal and Cue Example

SIGNALS AND CUES

Signal and Cue is a strategy that Web Designers use to increase initial interaction. The Signal is an visual indicator that tells the user that an interaction can take place. The Cue is a response that the signal has been activated. Signals and Cues can be demonstrated through icons/graphics, visual metaphors, and transmission of sounds. 

As shown in the example, the Signal and Cue methodology works in website design. The navigation is clear, there is good spacing, and the web page has a well define structure. If we take a closer look, we find variance in Signals and Cues (underlined and colored text indicating links and what is clickable). 

Discipline: Wireframe

Wireframe Example

WIREFRAME

Wireframe Example
www.notismapp.com

Wireframes are an important design tool used in Web development. It is a visualization tool for presenting proposed function, structure and content of a web page or website. A wireframe separates the graphic elements of a website from functional elements in such a way that Web teams can easily explain how users will interact with the website. 
A typical wireframe includes: page elements and their location, header, footer, navigation, content objects, branding elements. Grouping of elements including side bars, navigation bars, content area, labeling, page title, navigation links, headings to content objects, place holders, content text and images

Discipline: Breadcrumb Trail

Breadcrumb Trail Example
www.google.com

Breadcrumb Trail Example
www.newegg.com

BREADCRUMB TRAIL
A breadcrumb or breadcrumb trail is a type of secondary navigation scheme that reveals the users location in a website or Web application. Breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point. 

Usually in the form of:
homepage --> section page --> subsection page

Discipline: Interface Design / Web Design: Sequence Mapping

Sequence Example
www.google.com

SEQUENCE MAPPING
Sequence mapping is a way to label multi-step selection processes. Sequence mapping serves as two functions, showing where a user is at in a step-by-step experience and how much progress still needs to be done.

 

 

Discipline: Linguistics / Information Technology: Principle of Least Effort

www.google.com

PRINCIPLE OF LEAST EFFORT
The term principle of least effort is connected to information research / seeking by librarian Thomas Mann. The theory is that humans by nature create patterns of useful behaviors that allow ease (path of least resistance). Example using the search box or search engine. 

Discipline: Human Computer Interaction: Multi-Touch Gestures

Examples of Multi-touch gestures on track pad
http://support.apple.com/kb/ht4721

MULTI-TOUCH GESTURES

Multi-touch gestures are various operations and movements between a user's hand, touch pad or multi-touch device. The gestures may vary between devices and operating systems. Examples include tap, press / hold, scroll, pinch (zoom in / out), swipe, and rotate.

 

Discipline: Graphic Design: Grid Systems

Example of a grid system on a website
http://galleria.io/

GRID SYSTEMS
A grid is an underlying structure that supports a design based on alignments, object relationships and grid-based components. Grid systems can vary in numbers of columns and can be simple or complex.

Discipline: Human-Computer Interaction: Feedback

Example of Feedback for a website survey
www.questionpro.com/survey-templates/website-feedback/

FEEDBACK
When a user had indicated an action or completed a task, the system or product will respond to the user to reinforce that action has happened. Feedback can be communicated in various reaction times (sometimes milliseconds) and different forms, such as an auditory sound, physical action, verbal response, visual cue or a combination. Feedback can help in relaying if a choice was a positive or negative in the user's experience.

Discipline: Computer Science: Cloud Computing

Example of Cloud Computing
https://www.copy.com/

CLOUD COMPUTING

Cloud computing is the concept of accessing applications and storing file information online. "Cloud" is a metaphor for the Internet due to the way flowchart diagrams have a cloud-like shape drawn around them. The actual files do not exist on the local hard drive, but can be accessed via the cloud. Examples of online cloud services include Copy, SkyDrive, and Dropbox.

Discipline: Web Design: Call to Action

The Call to Action is circled.
https://signup.netflix.com/

CALL TO ACTION

A call to action (sometimes called call to action buttons) is simply a visual prompt (call) by the designer to the user in hope of a response (action). They can be used to encourage users to sign up for a service, download specific information or even buy a product. Urgent language that activates user's attention is often seen in action buttons, such as "Register Now" or "Try it for Free."