UI: VISUAL DESIGN PATTERNS

 

SUMMARY

Throughout Lecture Pod 7: User interface visual design patterns, it delivers some common navigation patterns and clearly identifies how it can be mistaken for how the website or app looks; more so the graphic design part to it.

In particular, for the UI visual design patterns both user experience and user interface come into play especially how interactive they are. Some things to consider are the aesthetics, how effortless it is and how they blend well with each other with the interactivity to initially guide the user through the experience. The first impression and the lasting either makes a web feel helpful, visible or in fact forgettable. Additionally, the main thing that is acknowledged when designing is the user experience, as in the end you want them to have a good one whether it is on an app or even a website.  It’s all about getting that motivation right to guide the user interface design for them to accomplish their goals, plus the look, feel and usability are all things to contemplate as it will get noticed no matter what.

Furthermore, the navigation of your site is significant especially things that provide various functional aspects. The items listed below are all necessary for a functional site and are needed to achieve the look and feel of a site as well. Such as; common navigation patterns, (tabs, menus, jumping in hierarchy and contents) drop down menus, drawer menus, search bar with drop down, big footer, home, breadcrumbs, carousel and tags. The above are all necessary for a functional site and are needed to achieve the look and feel of a site as well.

REFLECTION

Therefore, from this lecture I acquired the concept of UI visual design patterns and how providing the correct amount of information is a must. From what is being initiated to do as that portrays the knowledge that is partaken by the user. The context plays a major part which qualifies the audience to recognise the project, what it’s about and whether or not the design has approval from the audience.

 

USER SCENARIOS

SUMMARY

Within Lecture Pod 6: User Scenarios, it indicates a brief introduction into user’s scenarios and examples of user personas being applied to a scenario. A user scenario is the story that your persona acts out how certain type of users will interact with your website or project to complete your goal.

Based on thought exercises and are represented visually facilitating you to understand what your future users will look for when trying to complete tasks on time. This is enabling to test site structure before they do. This is then outlining the who, what, when, where and how and these are a great method of achieve and to get to the core of what is needed, that particular usage.

However, when creating personas, it is important to remember to generate them quite accurately especially with goals and scenarios describing the type of interaction the user will have. From there you can then explore the range of scenarios that are available to then progress to the steps and methods being broken down. In having specific instructions, it makes it easier for you when it is being created plus the context that it will be used and this can again be portrayed in the persona.

They are neither predictions nor forecast, but rather attempts to reflect on or portray the way in which a system is used on the context of daily activity. Once personas are identified they create plausible scenarios for the interactions they will have with the product.

REFLECTION

Thus from this lecture, I attained the importance of personas; the scenarios in place and the context they will be used in. Alongside the questions that are provided that play a part in the reality of actual situation and possible interactions. Furthermore, the significance of creating the persona and what goals you have for it and instructions should be used to provide the accurate scenario for the context it will be used in and needed for.

 

 

PERSONAS

SUMMARY

In Lecture Pod 5: Personas, it covers a brief introduction to the differences of user personas and artefact personas. As for user personas, they have been integrated within the user experience documentation ever since the 1990’s. Being a solid representation of the goals and behaviour of a hypothesised group of users. These all being synthesised from the amount of data collected from the various interviews with users. In terms of skills, attitudes and most importantly context.

Alan Cooper, who developed a concept of personas, from 1995 he became with how specific rather than a generated user would use the interface with the software. According to his book, ‘The Inmates are Running the Asylum’ – 1999, he indicates “…general characteristics uses and great practices or the personas”. Other factors include age, sex, occupation, hobbies, likes and dislikes in which form and establish that mindset and desire; from a large based to a small based audience. Due to a universal design being a concept you are designing for virtually any and all people, such as Ebay. Thus, when defining a persona, we need to always ask ourselves, what are the tasks you users are trying to perform. As there will always be questions that will be needed to be answered. Such as the various tasks for various personas plus the tasks matching with the user base.

With this situation comes the what and how, what in terms of the devices, the cross platform experience, especially the mobile usage experience. The how in terms of the mindset, those users who want to browse versus those who want specific content. This all depends again on your users and their mindsets when landing on a page, whether it affects a tiny or big audience. Mental modes also fit into the thoughts that people from around an idea or activity illustrating how your user or users approach a particular problem, plus unveiling the expectations of them. An artefact persona relates to the project or product being conducted not the user, as a way of thinking about the prosed visual design of the product. An example of this can be seen through the process in developing the product or in this case, artefact. Such as a medical device to help elderly patients to manage their health care within their homes. With positive first expressions being refined to clarify meaning.

REFLECTION

Hence, from this lecture I learned that personas are a great way of putting you design into perspective with different imaginary users through your personas to portray different stories. There are many different questions to consider for example age, sex and skills which are helpful in bringing your persona to life. Once that is done we move on questions like what devices and what are the age of the users. All this helps us in designing for our audience and cater to all different needs to personalities.

INSTRUCTIONAL DESIGN

SUMMARY

Throughout Lecture Pod 4: Instructional Design, it conveys to the audience how to do something or to essentially explain how something works. Including the types of key interactions.

According to explainers.com it indicates that designing instructions for the health care and the nursing sector. In regards to the complex machines and procedures and are constantly in need of updating their skills. Resulting in the cognitive load theory, which indicates how we think and remember. The working memory is a key executive functions. We are and will always be bounded by instructional design on a day to day basis. For instance, a ticket machine or even a printer, it’s how the instruction depicts whether we have a good experience or a bad one. Another example is the famous IKEA instructions; majority of the time it has no words but imagery being an international company. Nevertheless, that can sometimes not be effective as images alone might not be enough to provide sufficient details.

In terms of making good instructional design there is a lot that goes behind such as useful tricks like proximity which indicate to the intended user that the closer everything is, the more related the information is. Furthermore, photography can play a big role in this too, but often has multiple facts so not a good idea to use in some instances. There are also challenges like limited screen area, limited resolution, opportunities, time and layering. Designers have to design in an instructional way to facilitate the navigation of the design as well as give the user their sense of control and stability.

REFLECTION

Therefore, from this lecture I absorbed the concept of how we must always make sure that enough information is provided and what is being instructed is clear and to the point that is understood as that depicts the experience that is had by the user. Also, the context within should enable the audience to understand what your project is about and whether or not the audience is satisfied with the design.

 

DESIGN PATTERNS

SUMMARY

Throughout Lecture Pod 3: Design Patterns, it states the different types of basic design patterns for screen and how and where they are used within a website plus what each of them mean. In terms of the conventions that have developed; user interface and page composition. According to Christopher Alexander, he refers to it as design patterns in interactive design go above and beyond style plus visual repetition. Having similar and reusable solutions that have a working function often seen in screen design. Whilst User Interface Design Pattern Library states that, design patterns can be defined a recurring solution that solve common design problem.

Using responsive design has some side effects, due to other sites being similar also the increase of WordPress sites and themes provided. Because of the way the we’ve altered and consumed the web, resulting a large of common user interface design patterns and therefore have little way for innovation for user interface patterns.  Some patterns used within a website are; the hamburger menu, account registration, long scroll card, layouts, hero images, animation, material design, responsive design and flat design. As for animation, that includes; loading animations, navigation and menus (non scrolling), animation, hover animations, gallery and slideshow animation, motion animations scrolling and background animations/videos

 

REFLECTION

Therefore, from this lecture I absorbed the patterns mentioned within symbolising its various uses however, not all of them should be used and therefore, should be only incorporated to suit your website. Also, the context within should enable the audience to understand what your project is about and whether or not the audience is satisfied with the design.

 

 

PROCESS AND CONTEXT

SUMMARY

Throughout Lecture Pod 2: Process and Context, it covers the fundamental briefing introduction to the concept of context being an important components consider as interactive designers when designing interactives. Alongside this, there are 2 parts into the process; one being the design process overview.

The procedure can be best described, Bill Verplank identifies up to 8 distinct phases that can be seen in the interactive design process below which including the following.

  • process

Being interactive designers, we can use a multiple amount of tools and techniques to facilitates our minds to generate those vital and potential solutions.

Having these low-tech based processes really show that direction and steps in facilitating the missing information in forming consensus about that problem, being solved and achieved. Furthermore, as for the context, there are two parts, contexts for or of use. All surrounding questions as to what, how and where the uses are made.

When starting a project, concepts begins with sketching, mind maps, sticky notes etc., which enables us to comprehend, state and frame the problem. Initial visualisation such as diagrams, models and flows, allows us in recognising possible ways of missing information and taking the next suitable steps. The design progress generally requires a bigger amount of detail, using images on the screen.

By choosing the appropriate tools this enables us to design for your audience and their context use. There are various ways of gathering information, allowing us to create concepts and make design decisions for instance: precedent research, observe people, questions on observations and testing out the prototypes.

REFLECTION

Therefore, from this lecture I learned the essentials in the fundamental to the concept of context being an important component to consider as interactive designers when designing interactives. in documenting your ideas as well as your thought process that you have taken when developing a project. Also, the context within should enable the audience to understand what your project is about and whether or not the audience is satisfied with the design.

INTRODUCTION TO INTERACTIVE DESIGN

SUMMARY

According to Sharp, Rodgers and Preece (2002) they state that “interactive design refers to designing interactive products to support people in their everyday and working lives”. It is a phrase that reflects to a specific program that responds to user activity capable of acting or influencing each other.

Throughout Lecture Pod 1: Introduction to Interactive Design, it covers the basics around what interaction and interactive design is from a broad spectrum. To sum this procedure, it is based on 3 stages, Bill Verplank clarifies this throughout an interview that iconic pioneer of interaction design work is where the interaction designer needs to answer three questions, about how people act, how they feel, and how they understand. This also leads to knowing where an interactive designer sits, in terms of that spectrum of design, its roles and processes.

Clement Mok, expresses his thoughts in saying that its useful in portraying the interactive design that is relative to the other rules via this diagram. This can be seen in the image below. Furthermore, interactive design effects designers, in needing to think about this precisely depending on the context of that specific interaction. Leading towards a book, mobile or online shopping. As for ‘What is Interaction Design’, it can be answered in several ways as there are a numerous ways of interaction that happens, throughout our day to day lives as each of them shows different levels of engagement and reactions.

Gillian Crampton Smith, answers the same question by defining as “shaping our everyday life through digital artefact for work and for play and for our entertainment”. Smith, also mentions that it requires a mixture and not just have visual and sound but a combination of things that occurs eventually and therefore attracts existing disciplines in making a new form of design, which is therefore interaction design. This image can be seen in the image below. Lastly, there are five key designs areas within interaction design contributing to the design of interactive products, such as interactivity, information architecture, time and motion as well as interface.

REFLECTION

So, from this lecture I learned the essentials to the concept of understanding and representing everything that is interactive based and this effects the world in various ways. As designers, we have the power of making users feel and think another way due to the way the concept of interactivity is created. Either to do with content or how things are seen. Lastly, the five key designs areas within interaction design contributing to the design of interactive products, such as interactivity, information architecture, time and motion as well as interface.