Week 5

SUMMARY – INTERFACE DESIGN REVIEW 

This weeks lecture was discussing an overview of the past weeks lectures. but also highlighting design principles within the interactive design concept.

Covering topics and exploring interface design.

Revision of the fundamentals and principles of the interface designs.

• Visual Focus
• Problem Solving
• Contextual
• Conceptual
• Wholeness
• Linear and no linear

What is an interface?

• A point where two systems, subjects, organisations, etc. meet and interact.
• Interact with another system and or person.

REFLECTION

Gestalt psychology / visual thinking?

• Gestalt is a collection of theories of the mind, developed by the Gestalt School of Psychology at the Berlin School in the late 1880s.
• We visually see things as objects at first glance, we see a shape rather than the actual individual parts of the object itself.

Gestalt 7 Visual Principales

Proximity 

• The distance between elements, the white space and grouping of familiar objects.

Symmetry

• Organising objects and elements that are similar to each other to perhaps create familiarity for the user.

Closure

• The white space and good readably of the elements and objects on the screen.

Similarity 

• Similar to symmetry, similarly is creating / organising objects and elements that can be grouped to appear similar. Intensionally creating familiarity for the user.

Common Fate 

• Active buttons / tabs can be an example of common fate, because they should have a receptiveness to them in the layout of a design.

Continuity 

• Is the repetition of elements or objects within the design layout. It is the natural flow of designed elements.

Figure and Ground

• When our mind separates the visual objects into the foreground and other objects into the background.

REFERENCES AND IMAGES

http://www.smashingmagazine.com/2014/03/28/design-principles-visual-perception-and-the-principles-of-gestalt/

http://www.armedia.com/ux.php

https://www.linkedin.com/pulse/20140627050628-5269098-make-better-ui-design-principles-approach-and-benefits

http://digitology.co.uk/services/design_usability.php

http://www.designyourway.net/drb/user-interface-design-inspiration-40-ui-design-examples/

http://blog.fusioncharts.com/2014/03/how-to-use-the-gestalt-principles-for-visual-storytelling-podv/

Week 4

Summary – Static composition and Kinetic Screen

The human eye seeks the relationships between shapes: continuation occurs when the eye follows along a line, curve, or a sequence of shapes, even when it crosses over negative and positive shapes.

In interactive media designs lines may be static or in motion. The power of a line in motion to attract the human eye is well known. Designers can use moving lines to direct the user’s attention to specific content, to entertain, or to establish a style. In motion design, the eye will follow a kinetic, animated sequence of objects, even if they fade in and out

Visual hierarchy can be broken into 4 main key elements

Contrast is the occurrence of two different elements positioned close together; these elements can be colours, textures, shapes, direction, or size.

Great interactive design allows the user to completely delve into the design of the application and get carried away with the actual experience of the application itself instead of trying to figure out how to use the actual app.

Key elements spoken about in the lecture

• What they do
• What they look like
• What they look like they do
• The experience of using them
• Eye tracking

Refection

Visual hierarchy is a one of the most important tasks of gathering data for the design process, using tested theories and collative data, designers can take these key elements of the visual hierarchy and insert them into their own designs.

• Eye Tracking
• Size or Weight
• Space and Texture
• Typeface and appropriate type pairing
• Colours and Tones
• And the Directional layout of the application itself

Hierarchy can help you create and control order in your interactive designs by making sure the most important elements of your designs are seen first.

References and Images 

http://www.useye.de/eyetracking/en/

http://visual.ly/8-possible-ways-add-visual-hierarchy-your-design

Week 3

Summary – Interactive Design Process

Points in the Design Process

• The design process includes
• The concept
• The gathering of information
• The clients’ budget and restrictions (if any).
• Brainstorming of ideas.
• Prototyping and design development.
• Testing and feedback.
• Improvements and launch.

Planning and Scenarios

• Finding your target audience
• Making it personable and familiar to the target audience.
• Making sure to take in to account your users persona and making it easy readability.
• Description of the body and soul of the entire project, with all the details, and the method by which each element will be implemented.

4 Key words to remember when creating a design document.

• Caring, Humble, Conscientious and Guiding
• And supporting key words with imagery.

 Refection

User personas make the design of the application more memorable for the user, because it is well researched and is designed specifically for a certain target audience The persona can be very welcoming for the user and their overall experience, bringing empathy to the design process helps us consider how other people are thinking and feeling. A user scenario allows you to grow upon the users stories by including details about how a system might be experienced, and used. The design process should take into consideration the users overall experience with technology and highlight any specific knowledge that they might have with interactive media.

Toast Mock up / Mood-board

References and Images 

http://paper-leaf.com/blog/2011/05/our-design-process-an-infographic/ http://primeinfographics.com/design-process/ http://www.smashingmagazine.com/2014/08/06/a-closer-look-at-personas-part-1/

Week 2

Summary – Interaction and Interactivity 

The 5 key elements of Interaction Design

• Interactivity
• Information architecture
• Time and motion
• Narrative and Interface

Designers have to wear many hats, there are all different design choices and areas that a designer needs to consider. At its core interactivity is.

” The design of spaces for human communication and interaction”

Winograd (1997)

• Questions a interactive designers need to consider
  • How will the user interact with the application?
  • Will the target audience be familiar with the applications layout, will the commands be simple or more complex?
  • Consider the colours, shapes and size of the application?
  • Dose the application need a tutorial or perhaps an overview before using it.

Reflection

Narrative Design? A narrative designer is someone who is the storyteller within the applications developmental process. They have to tell the story within the space of a user navigation. Successful interactive design Success in interaction design is largely a matter of following established patterns, so people can apply what they already know to new area. Using known and well established interactive controls goes a long way in designing for easy interaction. There are specific considerations that will help make controls more usable for people using assistive technologies. And there are design considerations that make interaction more usable and enjoyable for everyone, including people with disabilities.

Tutorial Tasks 

Diagram/ Sketches

Toast Making Flow Chart

References and Images 

http://www.hansoninc.com/5-sources-for-inspiring-interactive-design/ Winograd (1997) Beyond Calculation: The Next Fifty Years of Computing, Springer – Verlag. http://narrativedesign.org/2011/09/what-is-a-narrative-designer-3/ http://www.pixton.com/comic/unygr1ma

Week 1

Summary – Web 2.0 and Convergence

Web 2.0 is all about the user expereance. It is interactive allowing users to contribute to with some key elements including.

• User participation.
• User creativity and participation.
• Web standards.
• User participation.
• Data driven and the joy of use.

The use of technology is and has been growing in numbers over the years, but the growth in mobile devices has rapidly escalated in a very short about of time, this is something designers should consider when designing experiences for users online.

Refection 

I would define Interactive Design as an approach to creating something of value for a user within their environment and expertise to accomplish a task easily and efficiently. This can be defined more intricately by each part of the interaction. I would say that a user or program faces a problem and must perform a solution. The problem or task requires some kind of solution that can only be resolved by the ability to understand the circumstances and perform a reaction. A user should be allowed to respond to a problem or task in a manner that is most efficient for them. It should be easily accessible and user friendly. It should also have functional menu items, and tool bars that will all perform the same exact function. But still allow the user to perform the most comfortable manor, If a person is not comfortable with the keyboard shortcuts then how much longer would it take if there was not a menu or tool to select from visually.

• Interactivity
• Information architecture
• Time and motion
• Narrative
• Interface

References & Images

http://www.uxpassion.com/

http://www.uxpassion.com/services/user-experience-design/interaction-design

http://uxdesign.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/

The Interactive Pizza Table

The interactive table currently under development for Pizza Hut may allow technology to be used in what could be an entirely new customer experience. The ability to go to a dine-in restaurant yet order an entire meal, play video games, and pay for the order without either leaving the table or utilizing human powered services for anything but behind the scene creation and order delivery is a futuristic concept that may soon come to pass. In the meantime, customers will continue to interact with servers while this new concept technology is still being tested.

References
http://www.youtube.com
http://guardianlv.com/2014/03/pizza-technology-the-interactive-table-video/

15 web sites with excellent UX

15 web sites with excellent UX

Checkout this website link written by Kendra Gains, it is a great article and has lots of excellent designs

Connecting – Trends in UI, Interaction, & Experience Design

The 18 minute “Connecting” documentary is an exploration of the future of Interaction Design and User Experience from some of the industry’s thought leaders.