Amie’s Blog

Interactive Digital Media

Every Last Drop Nice and Serious. (n.d.). Every Last Drop – An Interactive Website about Water Saving. Retrieved from http://everylastdrop.co.uk

What is the interactive about?

–          This interactive website informs people about how much water is wasted daily

–          Includes ways to reduce the amount of waste being made

–          Provides short yet informative points (gets straight to the point)

–          Places emphasis on why “every last drop” counts

–      Informs that water isn’t just wasted on showers or washing the dishes, but is also wasted in other areas in our  lifestyle – water is wasted depending what brand of clothes you buy or even the type of food you eat.

Who is it designed for? (Target Audience)

–        The website is designed for any age as the text is only of a few words and the interactive animation visually helps the audience to understand the fundamental points of water waste.

–    particularly useful for a younger audience as the colours and simple illustrations help convey the meaning in a clear and interesting way. Though it’s combination of illustration and factual text makes it a useful website for all

What knowledge does it assume of the target audience i.e. digital literacy?

• They assume the audience is able to read
• Have access to a computer and be able to correctly use it
• The knowledge of what an average morning routine looks like

Describe the type of user interactions, and the user interface.

–          User must scroll down the page to see the sequence of information being portrayed

–      Each time the user scrolls down the page animations from a scene disperse and then form together to create the next scene

What can you say about the visual design – layout, colour, and typography? How would you describe the style?

–          The style of this website is heavily made in an illustrative style, or cartoon like animation as the objects created are very simple

–          The layout is user friendly on all devices. The layout is also very simple as the user only interacts with the website by scrolling

–          The colours are vibrant and fun, making it interesting to look at and appealing to the eye.

–          The typography is simple and easy to read. The typography changes with each scene to suit the environment

What improvements would you suggest?

–         A clearer understanding of how to navigate through this website, i.e.  a more striking and noticeable arrow or sign directing the user to scroll down.

–    Improvement would be having an introduction or brief story into what the user is about to be reading

–    The facts could be expanded and more information about how and why so much water is lost

–    Provide the user with a deeper understanding as to why it is so beneficial. I.e what are the long term impacts of wasting so much water?

–  more specific information could be added to teach the audience how to lower their water usage

Take 3 for the Sea Take Action. (n.d.). Retrieved from https://www.take3.org/take-action/

The Sea of Plastic The Seas of Plastic Interactive. (n.d.). Retrieved from http://dumpark.com/seas-of-plastic-infographic/

Species in Pieces In Pieces. (n.d.). Retrieved from http://www.species-in-pieces.com/#

Our planet is drowning in plastic pollution. This World Environment Day, it’s time for a change. (n.d.). Retrieved from https://www.unenvironment.org/interactive/beat-plastic-pollution/

Plastic bags used per year Number of plastic bags produced – worldwide, this year. (n.d.). Retrieved from http://www.theworldcounts.com/counters/waste_pollution_facts/plastic_bags_used_per_year

Chris Jordan Chris JordanRunning the Numbers. (n.d.). Retrieved from http://www.chrisjordan.com/gallery/rtn/#plastic-bags

Plastic Adrift Plastic Adrift. (n.d.). Retrieved from http://plasticadrift.org/

This blog showcases the long journey I have taken throughout Graphic Design: Interactive Digital Media. Each post shows information I have gained and skills that I have acquired. Enjoy!

My Story

For as long as I can remember, I have always been passionate about art. Immediately upon a young age, it had become an important aspect of my life. Whether it’d be through drawing on concrete with chalk, being taught how to paint and draw by my father, making models of buildings with old shoe boxes, sculpting figurines with my older brother, filming and taking photos of memorable moments on an iPod Nano, or even using my mother’s makeup to experiment with different colours and textures on paper. Art has always given me a sense of freedom to express myself in many ways. Without it I am certain my world would be extremely plain and uninteresting.

As I grew older, my love for art fuelled many of my other interests. I was in particularly fascinated by the realm of Graphic Design. I became hooked on creating logos, advertisements, posters, magazine covers/spreads, animation, app design, and photography. Unquestionably this is what I aspire to do – to become an artist within the digital realm. Which has lead me to where I am today – University of Western Sydney, undertaking Bachelor of Design (Visual Communication).

Interactive design

Interaction design is a process of creating engaging and meaningful designs that help improve the interaction between users and products – shaping and influencing our everyday lives. Interaction design is the creation of a user orientated product, such as the production of an app or website. Though to create such products, a designer must wear the hat of many roles as their are many processes that have to be taken into consideration for interactive design.

Examples: The following gifs showcases examples of interactive design in website and app design. The interactivity is shown through buttons, menus, images, animation etc.

Information/Instructional design

Information design is the act of showcasing information in a organised and efficient way that is easily understood by users. With Information design it is a designers role to present data as efficiently and effectively as possible – quick and easy. Whereas, Instructional design is the creation of learning experiences which results in the acquisition and application of knowledge and skills to certain activities. Both information and instructional design are both required in creating interactive designs.

UI design is about providing a user with the right tools to accomplish goals within/throughout the interactive. This is why producing user persona and scenarios are important, to guide the user interface design. User experience (UX) includes the process of personas, user stories, user research, usability testing, wireframes which connects to user interface (UI), layout, visual design and branding. Good UI designs should strive for a balance in aesthetics and effortless interactivity, guiding the user through the experience. User experience is the abstract feeling users get when using the website, it includes the look, feel and usability. The ultimate goal is to make your user have a positive experience. For websites the design team will focus on the UI in order to heighten the UX.

UI design patterns is reoccurring solution that solve common design problems. Common navigation patterns include:

Tabs

• Navigation tabs
• Module tabs

Menus

• Horizontal dropdown menu
• Vertical dropdown menu
• Accordion menu

Jumping in hierarchy

• Shortcut dropdown
• Fat footer
• Home link
• Breadcrumbs

Content

• Carousel
• Event calendar
• Article list

Common Navigation Patterns:

They are a digital version of filing tabs in a filing cabinet. This is an example of skeuomorphism, an interface object that mimic the real-world counterparts. Tabs are used to separate content into sections, which are illustrated as flat navigation structure, which give a clear and visible indication of current location.

Dropdown menus are used as navigation but to save space and to conceal information. You would use this menu for 2-9 sections of content that needs a hierarchy navigation.

Drawer menus (hamburger menu) allows for a quick access.

Search bar with dropdown eliminates confusion and is considered as a shortcut for the hierarchical structure.

Big footer is used to quickly access specific sections or application. It is also should as a shortcut.

Home is the starting location of a website. A website should always have a clickable link/logo that directs back to the home.

Breadcrumbs are used to identify location in the website hierarchy. They take up minimal space.

Content Navigation Patterns:

Carousel are used to browse through items within website. It is used to indicate that there are more than one items.

User scenarios are the stories your personas act out. These scenarios are basically an exercise in which you predict how certain users (represented by your personas) will interact with your interface in a situation to complete a goal.  
It is obvious that user personas and scenarios play hand in hand, helping inform your interactive and how users may explore the interactive. Scenarios are including information about goals, expectations, motivations, actions and reactions. Example:

These hypothetical scenarios help you understand what your future user will look for when attempting to complete tasks on your interactive. They can help unveil and isolate problems, eliminating issues during the production process. User scenarios should outline the who, what, when, where, why and how of the usage.

User Personas are detailed documents that identifies user needs, which then calls for a great user experience within a project. As a designer it is important to identify users successfully, as it has a flow and effect to the entire project. These fictional users are representative of real users in the world, collecting details such as goals and behaviour of a group of users. In most cases user personas are synthesised data collated from interviews with users that capture the behaviour patterns, goals, skills, attitudes and the environment of context. With added fictional details to make the user somewhat realistic. For each product made their can be several user personas made, though only one should be the primary focus of the design.

Now a user persona usual entails the following information/structure: age, sex, occupation, hobbies, likes/dislikes, behavior patterns, goals, skills, attitudes and their environment (or context). Though it also captures the personalities of these users, the ultimate goal is to establish the mindset, desires and necessary tasks of your users. User personas help inform your project.

To develop a artifact persona, it is helpful to ask the following questions:

• If the interface were a person, what would she or he be like?
• How would you expect users to react when they first view the product?
• How would you describe this product to a friend?
• How is the product different from competitive products?
• Which celebrity (or car, movie, etc.) is the product most like? Least like? Why?

How to “do something”, or to explain “how something works”

Now we’ve all come across some sort of instruction that explains how something works or how to put something together, and so on. Depending on the importance of a task or lack thereof, calls for the level of detail the instruction is designed in. Research has been made in this realm, known as the cognitive learning theory. Including information on how we thin and how we remember, using this research to create effective ways of delivering instructions. Researchers have found that we humans use something called a working memory. It refers to how we manipulate information that is stored in our short-term memory which is our key executive functions, although it has its limitations. As we often find ourselves forgetting things once and awhile. When designing instructional design, it is best to avoid using imagery as it is often overly saturated with too much elements and details, causing confusion to the user. An alternative is to us simple graphics with a limited colour palette, as you can isolate the most important details.

Kinds of Interaction

(Tell a user how to do something or explain how something works)

Instruction – by clicking buttons

Conversation – back and fourth dialog

Manipulation – drag and drop elements

Exploration – open, playful, game like

In this blog we will touch base on screen design and design patterns for screens. Patterns refers to the development of user interface and page composition. It is important to understand that the patterns used when designing for different screens, will be different on all devices. When designing a user interface, it is best to start off with a smartphone, as its smaller design will force you to prioritise, and will minimise the difficulties when adopting a large screen pattern for a smaller device. In the book A Pattern Language by Alexander (1977, p.15) he states “…each pattern represents our current best guess as to what arrangement of the physical environment will work to solve the presented problem”. Though it is important to understand that they are just patterns, they may solve a design problem, or they may not, it all depends on the problem at hand.

Nowadays is easy to decipher a responsive website made on applications such as WordPress, as they become notably similar in UI pattern proliferation. Which makes it harder for innovation in design, though usually creates a smooth and easy experience. Recognisable patterns include:

1 – The Hamburger Menu

2 – Account Registration

3 – Long Scroll

4 – Card Layouts

5 – Hero Image

6 – Animation

Loading Animation

Navigation and Menus (non-scrolling) Animation

Galleries and Slideshows

Motion Animation

Scrolling Backgrounds Animations/Videos

7 – Material Design

8 – Responsive Design & Flat Design

It’s important to not follow trends just cause it’s the new cool thing, but to use trends for a better experience for your users.