Story board

Toast Story Board

---

Example of the considerations made when creating an interactive design. Although this is an unrefined version it shows how the basic instructions of making toast can become an engaging and interactive experience for the user.

Home page/opening page for the user. They press the button “Press to pop” to navigate the site as each step pops up in the form of toast.

Second step where the background image changes and user can watch the next step pop up as the button is pressed. There is also an information icon at the top of the page that can be hover over with the mouse to give additional information.

The third step involves watching the next bit of toast pop up to give another instruction. As well as pressing the button, the steps can be accessed by clicking the pieces of toast at the bottom of the screen to broaden navigational possibilities and options to make is easier for the user.

Information/Instructional design

What is Information and instructional design?

---

Information design is about the clear and simplified presentation of information the audience can easily understand, while Instructional is about clear instructional strategies used to best aid learning. This is further explained below;

Information Design: can be defined as “an area concerned with understanding reader and user responses to written and visually presented information” (Beardslee, n.d.). It’s the action of informing: creating meaningful information by giving it form and structure and purpose in order to come across clearly and be understood by the target audience. The presentation of message content in consideration to the viewer. (Kook-kim, Y, .n.d.).

Instructional Design: can be defined as “a technology which incorporates known and verified learning strategies into instructional experiences which make the acquisition of knowledge and skill more efficient, effective, and appealing” (Merrill et al., n.d.). It’s about the determination of design strategies and learning experiences to best achieve the acquisition of knowledge. Instructions as a visual source to help understand a process/information (Tucker, C., 2007).

Examples-

Information design:

Oil imports to the US- is clear and concise portrayal of information and breaks down the content for the audience to understand.

About the Orange: Clearly shows and breaks down information on different parts of the orange. You also get instant information on its geography as well.

Instructional Design-

Convertible roof: Clear instructions to help the user learn how adjust the roof of the car.

Exercise positions: Step instructions to help users learn different exercise positions more effectively as it shows characters in each position.

References-

Merrill, D, M., Drake, L., Lacy, J, M., Pratt, J., ID2 Research Group Utah State University. Retrieved from http://mdavidmerrill.com/Papers/Reclaiming.PDF

Tucker, C. (26^th, May, 2007). What does an instructional designer do?. Experiencing E-learning. Retrieved from       https://christytucker.wordpress.com/2007/05/26/what-does-an-instructional-designer-do/

Beardslee, D. Kook-kim, Y. Information Design Definitions. (.n.d.). Retrieved from http://library.rit.edu/gda/node/280

Interface Design Review

Lecture 5 by Greg Hughes- “Interface design review”

---

Summary-                                                                                                                                          

Interface– “a point of interaction” the in-between in interaction present in even the most minor of interactions like clicking a mouse. It’s what interactive experience depends on.

Nicholas Luppa explains “Good, clean, clear navigation is critical to the success of any interactive experience, but it is so basic that its excellence has to be a forgone conclusion” thus a good interactive experience is where the interface is barely noticed due to quality function which wholly engages the user (Luppa, 2001).  More over he highlights that a bad design is when the interface is seen and user has come to a stop in navigation and has to ask the dreaded question of where do go from here. (Luppa, 2001)

Interface designers have to be continuously reflective, critical and aware of interactive evolution in order to evaluate and understand not only the current state but the future direction it may take. New media is usually surrounded by hype, but it isn’t a big jump in the evolution of technology that everyone makes it out to be. It has a path it follows that has brought it to the present.

Old media-singular provider-to-many

New media-collaborative

Contemporary interactive categories–

Hypertextual navigation: Reading choices are made by the use, making their own individualized text through access to different segments of information called up through their navigation process.

Immersive navigation: hypertext and represented space for example virtual reality, simulations and games. Fully engaged and embodied by the interface.

Registration interactivity: User collaboration enabled through the ability to comment and respond to information. Examples can include Facebook, blog comments and tweets.

Interactive communication: a connection between individual people. A live chat site being more interactive than a forum as the connection is enhanced through the lack of time barriers.

The nuts and bolts of screen based design–

A designer has to consider a site or system as a whole where graphic forms and concepts don’t exist on their own but coexist in a decisive and purposeful balance.  As Craig Baehr states “visual thinking comes from the field of Gestalt psychology, which argues that humans respond, organise and assign meaning to elements in their visual field. This approach considers how users conceptualise functional wholes from the individual elements they perceive in the visual field” these elements decided and based on certain fundamentals/principles.

Fundamentals/principles-

Visual focus; compositional considerations such as format, colour and contrast to give visual distinction and cues.

Problem solving: Information design and data mapping using multiple navigation tools, variety of choices for the users such as search engines along with highlighted navigational pathways for the users.

Contextual: compositional considerations such as placement and hierarchy. For example place the detailed content in lower site levels.

Conceptual: Site signifiers such as icons, shapes and graphics users will be familiar with along with user designed metaphors to help users comprehend the use and content of visual spaces.

Wholeness: structure and organisation of related content using signifiers such as shapes and visual space along with contrast and grouping to help users identify relationships between elements.

Linear and non-linear: Two navigational structures. Linear where the user is forced to follow a straight line from first page to last, not being able to jump straight to last page. This can make the user quite frustrated. Non-linear allows all page to be accessible from any page and users can jump from straight to last for example.

Reflection-                                                                                                                                            

There isn’t really a distinctive aspect of this module that subjectively, I would call more important over others as they all coexist to help create the most effective interface and interactive user experience. One point that does stand out however would be to considering a page as a package made up of different elements. Those elements define and make up the page so they have to be carefully considered.

Reference-

Luppa, V, N. (2001, p.59). Interactive Design for New Media and the New Web. Focus Press, Boston

Baehr, M, C.(2007, p.5). Web Development: Visual-Spatial Approach. Pearson, New Jersey.

Interactive Design

What is interactive design?

---

Interactive design is about user interaction. It’s about how the user can operate, control and communicate with the technology and how the technology can communicate back (Interaction Design., n.d.). It’s an engaging design that captures the viewer by interactive tools such as navigation and message boards, making the user feel much more involved online. Interactive design varies from the ability to click a link or to post a comment on a blog, small tasks that are made easy by the designers who create this user experience. Therefor when designing a site, the designer has to consider the quality of user experience; how the site behaves. They have to know if the user understands how to navigate their system, know what their actions are achieving and what to do next from there. As professor a professor of interactive design, Jonas Lowgren says “Interaction design is about designers shaping digital things for peoples use” (Lowgren, para. 2) and it’s that usability that interactive design’s about.

Examples-

Twitter:

Twitter is a sight wholly designed for user interaction with the ability to post, comment and follow others.

App Fruit Ninja:

Designed specifically for interactivity, ability have control over the game and its outcome.

Navigation App:

This GPS Navigation & maps app interacts with the user through sound by telling you what to do, engaging the listener and involves them by sight as the user is able to see the arrow (signifying them selves) move as they do.

Reference-

Lowgren, J. (n.d.). Interaction Design. Interaction Design Foundation. Retrieved March 12, 2015, from https://www.interaction-design.org/encyclopedia/interaction_design.html

Interaction Design. (n.d.). Retrieved March 12, 2015, from http://www.interactiondesign.com.au/

The Static ‘and’ Kinetic Screen

Lecture 4 by Greg Hughes- “The static ‘and’ kinetic screen”

---

Summary- 

Play, Experience, Design:

Static: Motionless

Kinetic: Motion or change over time.

The lecture is about gaining a perspective and definition of interactive design from designer and writer Andy Polaine; who focuses on play as a motive dealing with interaction design. Designing with play in mind makes an engaging and enjoyable interactive design.

In Polaine’s opinion “interactive design is about making complicated things easier and more pleasurable to use” (Polaine, A. 2009, p. 30-31). It’s about the function of the interactive design, the look and feel, the appropriate or schematic visual and physical treatment and the experience it gives the user.

When considering static graphic compositions the designer has to consider the relationship between the human eyes and interactive objects and where they are carried across the screen. The users gaze on the screen more important that physically clicking and hitting button as the physical is dependent on sight. This is where visual hierarchy and eye tracking comes into play.

Eye tracking– process of measuring the spots the eyes carry on the page through a monitor and highlighting the most active visual areas of the composition. When understanding this, basic considerations need to be pointed out such as the way we are culturally conditioned to read left to right or to ignore certain advertising.

Using what you know:

Static composition and visual hierarchy-

“The lecture relates principles of static composition and visual hierarchy to contemporary definitions of interactive design. A screen can be understood as a static medium like print but has evolved over time into a kinetic and interactive medium”(Hughes, G. Lecture 4). Thus it still relies upon the basic principles you already know as different methods of hierarchy. Usability can be improved from basic consideration of visual graphics on a screen in respect of target audience and content.

Display of information-

Infographics: graphic information with visual hierarchy to specific content and information.

Visual-Spatial design (Gestalt psychology): Significance of information specified by how “Information is grouped and how visual elements are interrelated to collectively function as a single whole” (Baehr, p. 125).

Methods of hierarchy-

Point of interest: The focus point and most eye-catching part of the composition. Leader of visual hierarchy.

Contrast: differences of light and dark of visual elements and tones in a work. Draws attention.

Scale: size of visual elements used to define importance.

Colour: Categorizes and highlights certain areas for attention.

Typography: Establishes a sense of hierarchy through font weights, tone and colour and size.

Reflection-

The most important aspect of module one is having an understanding of eye-tracking. If the designer can understand that then they can anticipate and design work based on hierarchy and the viewer’s perspective. Similarly in module two, hierarchy can be denoted of being the most important aspect, as without hierarchy, the design is like collage of information. It has no order and navigation and user experience is affected.

Reference-

Baehr, M, C. (2007, p. 125). A Visual-Spatial Approach. Web development. Pearson, New Jersey.

Polaine, A. (2009, p. 30-31). Any Polaine. Desktop 251.

Flow chart

Flow chart on how to cook toast-

Flow chart demonstrating the thought process behind interaction. This process can be applied to interactive design.

Web 2.0

What is web 2.0?

---

Web 2.0 is the current web, and “describes a set of next generation Internet technologies” (Wolcott, 2007, para. 1). It’s changing and applying a new approach to the thinking behind the development of a website; the way information is “created, used, shared and manipulated” (Wolcott, 2007, para. 1) changing from static publishing and institutional control to consumer control with a more “collaborative user generated model” (Watson). Thus the web isn’t just about the presentation of information as it was previously; it’s about online community and user-interactivity. Forms of social media such as Facebook, Twitter all being a large part of web 2.0. Designers are now directing their attention on establishing quality user experience as with a higher demand for social inter-activities than ever before, the web becoming more focused on the dynamic presentation and organisation of information and how to further engage the audience.

Some examples of web 2.0 that show the way information can be “created, used, shared and manipulated” (Wolcott, 2007, para. 1) may include-

Utube:

Dynamic site, know for its user-ability to upload, watch and comment on videos.

Another dynamic social media site, users are able to upload, “like” images, “pin” them onto there own boards to display. They also have a news feed which displays recent pins from people they follow. The ability to communicate with others can be done on the pictures or privately.

Newsvine:

Is all about reading, writing and discussing the news.

References-

M, Wolcott. (15^th, May, 2007). What is Web 2.0?. Money Watch. Retrieved from http://www.cbsnews.com/news/what-is-web-20/

S, Watson. (2015). Web 2.0 & Convergence. Lecture notes. Retrieved from https://vuws.uws.edu.au/webapps/blackboard/content/listContent.jsp?course_id=14739_1&content_id=_1514729_1

Design Process Overview & Planning

Lecture three by Sarah Watson- “Design Process Overview” & “Planning-Personas, Scenarios and Wire frames”

---

Summary-                                                                                                                                                                          When designing a projects, designers have to go through a basic design process before completion, and launch. This involves Pre-Project, Concept and planning, Design Prototype & Specification, Production, Testing and last but not least Launch and Maintenance.

Pre-project: includes client brief, budget, schedule and Proposal. During this phase the clients proposal  will be created or responded to by a team designers. It’s similar to a brief and it’s in this phase that a realistic budget and schedule will be somewhat developed.

Concept and planning: includes micro-schedule, flow chart, and proof of concept, feature list, Design research, and Experiment & Tech requirement. During this phase is the first real progress toward creating a solution. Discussions on Goals, messages and audience is explored and decided with the client, and can be achieved through personas, persona artifacts and scenarios . This is an important phase, as when-ever a project needs to be revised they come back to this phase. Every decision and action will be effected and derived from these decisions.

Design Prototype & Specification: includes Experience-user testing; work flow and story boards, visual design and specs, User testing report and a finished experimental prototype. Engineering-coding and code reviews- Functional specs, Production matrix and finished engineered prototype. This stage is about how the solution will be achieved by creating various examples with consideration of the decisions made in the concept and planning stage. Both preliminary specification and exploration in product function will be done here. The prototypes will be tested by potential users and any problems will be weeded out. At the end of this stage there will be a fully developed and tested prototype along with a functional specification, which together describe aspects of the final product.

Production: Includes Alpha build, Beta build, Test matrix and test plan. By this stage all questions should have been answered. Builds can then be created, which are only temporary working instances that will be tested and go through many iterations before completion. These builds are often labelled Alpha (no.). The project is then tested and made live after production is complete and everything is integrated into the Beta build.

Testing: Includes Launch/test report. This phase includes quality testing by the designers and making sure all components work. Everything must be checked such as links and making sure they work on different pages, browsers and even platforms etc.

Launch/ Maintenance: Includes Post mortem, style guides, Archived assets. The project is now ready to launch and become live. Constant maintenance of the site need to be done as long as its active including; adding new content and interactions or other additions to the site. If the additions are major it could be brought back to concept and planning stage.

Persona’s:

When working on a project, conscious decisions have to be made about the audience, as designers use them as a guide. This is where personas come into play. Personas are fictional archetype users, and are the designers articulated vision of their audience.  They are created through interviews, research patterns or similarities in human behaviors and goals. This can be accompanied by scenarios which portray the way a user or persona may interact with the finished project and the context in which they use it. Another way to vision the audience is to “apply the persona to the artifact which is the product or project” that gives everyone the context to step in and make objective decisions in relation to the visual design of the product.

Reflection–

In respect, all of the steps in the process of design is important, however subjectively, the concept and planning along with prototype and testing would have to be the most important. Concept and planning is the whole idea, the prototype bringing the idea into effect and testing; to make sure the works up to a professional level, is functional and appeals to the user. These three could easily be considered the three most important aspects of the design process. Along with this the persona is quite significant as it builds a guide for designers to base fundamental decisions off and can add considerably to the whole concept of the design.

Interaction-Interactivity

Lecture Two by Sarah Watson- “interaction-interactivity”

---

Summary-

Interactive design is all about user experience. The designer has to ask three questions when creating an interactive design; How do you navigate the site, what feedback do you get once an action is performed and how do u know what to do next and understand what your actions are achieving. To answer these questions designers have to be aware of human cognition so that designs can produce the best possible user experience. Interactivity can be considered to include the amount of control and the amount of control offered over tools, place and content to the user. A good design is when users are able to understand where they are in the system, they know where to go from there, how to go from there and what is going to happen when they do. Thus navigation is a large aspect of good interface, as when the possibilities are laid out users shouldn’t find it a challenge to access them. Hence navigation has to be clear, unambiguous and direct because it’s the quality of how we interact that interactive design’s about.

Reflection-

The most important aspect of interactivity is the navigation. A good navigation allows ease in using the site, prevents confusion and makes it less of a challenge to find things. A good navigation in retrospect, produces a good user experience because the consumer understands how act, how to feel and know what to do. Therefor how the system behaves for the user; the quality of interaction is the most significant part in interaction design.

Web 2.0 & Convergent Media

Lecture 1 by Sarah Watson- “A contextual background to the design environment”

---

Summary-

Web 2.0 is the current Generation web in which visual design communication converges with, as well as becomes a fundamental aspect in the media environment. The web which was once known for news and one way direct source of information is now more focused on a more interactive user-focused design. Screens are becoming smaller and the amount of users are increasing. Since Web 2.0 the amount of sites along with users has increased exponentially, since as of 2006 the web reached 1 billion global users which is more than double the amount in 1996 with only 45 million users and 250 000 sites. Social media playing the key catalyst in this increase. Moreover “Alongside Web 2.0 there has been a convergence of all areas of technology and information devices” (S.Watson, 2015) this includes communication networks, computing/information technology and content. The cross over between the three being the definition of convergent media. (S.Watson, Web 2.0 & Convergence, 2015)

Reflection-

The most important aspects of Web 2.0 is the increasing importance of visual communication and social interactivity in the media. As designers its important, pointing the way in which we guide our design in-order to meet consumer needs. The web is an online community for users, with a higher demand for social interactivity than ever before and if as designers we can understand that, we can focus and add on to the user’s experience and go forward from there. As for Convergent media, the most important aspect would be the fact it puts a further demand on designers for quality service and experience.

References-

M, Wolcott. (15^th, May, 2007). What is Web 2.0?. Money Watch. Retrieved from http://www.cbsnews.com/ news/what-is-web-20/

S, Watson. (2015). Web 2.0 & Convergence. Lecture notes. Retrieved from https://vuws.uws.edu.au/webapps/blackboard/content/listContent.jsp?course_id= 14739_1&content_id=_1514729_1