Using material design in the redeveloped design documentation

 

Google material design check list

This material check list from android-developers Google will be my secondary source for information when it comes to the material design aspect of design documentation rather than diving into the mass of documentation when in the middle of fast prototyping having a reference sheet included in the design documentation will be much faster. While Googles own guidelines are in depth and incredibly accurate I have found that when prototyping and quickly coming up with ideas you need something which is slimmer and more light weight to quickly work from in regards to the design.

I am planning on taking the check list and turning into s set of steps which will be integrated into the design documentation as part of the overall creation phase. This will include a method and way of creating material design cards allowing people quick reference to screen sizes and the other hurdles to allow people to throw together a paper and card design in a few minutes without even needing to sketch out the designs in the first place.

The Check list

Tangible Surfaces

UIs consist of surfaces (pieces of “digital paper”) arranged at varying elevations, casting shadows on surfaces behind them.

Signature element: Shadows are used to communicate which surfaces are in front of others, helping focus attention and establish hierarchy.

Shadows and surfaces are used in a consistent and structured way. Each shadow indicates a new surface. Surfaces are created thoughtfully and carefully.

There are generally between 2 and 10 surfaces on the screen at once; avoid too much layering/nesting of surfaces.

Scrollable content either scrolls to the edges of the screen or behind another surface that casts a shadow over the content’s surface. Never clip an element against an invisible edge—elements don’t just scroll off into nowhere. Put another way, you rarely scroll the ink on a surface; you scroll the surface itself.

Surfaces have simple, single-color backgrounds.

A Bold, Print-Like Aesthetic

The “digital ink” you draw on those pieces of digital paper is informed by classic print design, with an emphasis on bold use of colour and type, contextual imagery, and structured whitespace.

Signature element: Apps use a primary colour and an accent colour to colour surface backgrounds and key UI widgets such as text fields and checkboxes. The accent colour contrasts very well with the primary colour (for example an app can use a dark blue primary colour and a neon pink accent colour). The accent colour is high-contrast and is used to call attention to key UI elements, like a circular floating action button, selected tab strips, or form fields.

Signature element: On Android 5.0, the status bar is coloured to match the app’s primary colour, or the current screen’s content. For full-bleed imagery, the status bar can be translucent.

Icons, photos/images, text, and other foreground elements are coloured “ink” on their surfaces. They don’t have shadows and don’t use gradients.

Colours extracted from images can be used to colour adjacent UI elements or surfaces.

Signature element: Icons in the app follow the system icon guidelines, and standard icons use the material design icon set.

Photos are generally immersive and full-bleed. For example, for detail screens, run edge-to-edge and can even appear behind the app bar or status bar.

Signature element: Where appropriate, elements like body text, thumbnails, app bar titles, etc. are aligned to 3 key lines. On phones, those key lines are 16dp and 72dp from the left edge and 16dp from the right edge of the screen. On tablets those values are 24dp and 80dp.

UI elements are aligned to and sized according to an 8dp baseline grid. For example, app bars are 56dp tall on phones and 64dp tall on tablets. Padding and margins can take on values like 8dp, 16dp, 24dp, etc. More precise text positioning uses a 4dp grid.

Authentic Motion

Motion helps communicate what’s happening in the UI, providing visual continuity across app contexts and states. Motion also adds delight using smaller-scale transitions. Motion isn’t employed simply for motion’s sake.

In general, UI and content elements don’t just appear or disappear—they animate into place, either together as a unit, or individually.

Signature element: When touching an item to see its details, there’s a “hero” transition that moves and scales the item between its position in the browsing screen and its position in the detail screen.

Signature element: Ripple effects originating from where you touched the screen are used to show touch feedback on an item.

Signature element: UI elements can appear using a circular “reveal” animation.

Signature element: Animations are used in more subtle, delightful ways, such as to convey the transition between icon states or text states. For example, a “+” icon can morph into an “x” symbol, or an outlined heart icon can be filled using a paint-bucket fill effect.

Animations and transitions are fast—generally under 300ms.

Crossfades are often replaced by translate/slide transitions: vertical slides for descendant navigation and horizontal slides for lateral navigation. For slide transitions, prefer quick acceleration and gentle ease-in deceleration over simple linear moves. See the material design spec on motion for more.

Adaptive Design (and UI Patterns)

Tangible surfaces, bold graphic design, and meaningful motion work together to bring a consistent experience across any screen, be it phones, tablets, laptops, desktops, TVs, wearables, or even cars. Additionally, the key UI patterns below help establish a consistent character for the app across devices.

The app uses responsive design best practices to ensure screens lay themselves out appropriately on any screen size, in any orientation. See the Tablet App Quality Checklist for a list of ways to optimize for tablets, and this blog post for high-level tablet optimization tips.

In material design, detail screens are often presented as popups that appear using “hero” transitions

In multi-pane layouts, the app can use multiple toolbars to place actions contextually next to their related content.

Signature element: Where appropriate, the app promotes the key action on a screen using a circular floating action button (FAB). The FAB is a circular surface, so it casts a shadow. It is coloured with a bright, accent colour. It performs a primary action such as send, compose, create, add, or search. It floats in front of other surfaces, and is normally at an 8dp elevation. It frequently appears at the bottom right of the screen, or centered on an edge where two surfaces meet (a seam or a step).

App bar

Signature element: The app uses a standard Android app bar. The app bar doesn’t have an app icon. Colour and typography are used for branding instead. The app bar casts a shadow (or has a shadow cast on it by a surface below and behind it). The app bar normally has a 4dp elevation.

The app bar might be for example 2 or 3 times taller than the standard height; on scroll, the app bar can smoothly collapse into its normal height.

The app bar might be completely transparent in some cases, with the text and actions overlaying an image behind it. For example, see the Google Play Newsstand app.

App bar titles align to the 2nd Keyline

Where appropriate, upon scrolling down, the app bar can scroll off the screen, leaving more vertical space for content. Upon scrolling back up, the app bar should be shown again.

Tabs

Signature element: Tabs follow the newer material design interactions and styling. There are no vertical separators between tabs. If the app uses top-level tabs, tabs are visually a part of the app bar; tabs are a part of the app bar’s surface.

Tabs should support a swipe gesture for moving between them.

Selected tabs are indicated by a foreground colour change and/or a small strip below the tab text (or icon) coloured with an accent colour. The tab strip should smoothly slide as you swipe between tabs.

Navigation drawer

Signature element: If the app uses a navigation drawer, it follows the newer material design interactions and styling. The drawer appears in front of the app bar. It also appears semi-transparent behind the status bar.

Signature element: The leftmost icon in the app bar is a navigation drawer indicator; the app icon is not visible in the app bar. Optionally, on earlier versions of the platform, if the app has a drawer, the top-left icon can remain the app icon and narrower drawer indicator, as in Android 4.0.

The drawer is a standard width: No wider than 320dp on phones and 400dp on tablets, but no narrower than the screen width minus the standard toolbar height (360dp – 56dp = 304dp on the Nexus 5)

Item heights in the drawer follow the baseline grid: 48dp tall rows, 8dp above list sections and 8dp above and below dividers.

Text and icons should follow the key lines discussed above.

The checklist is in-depth and useful but will need to slimmed down in order to fit with the overall theme of rapid prototyping, this will be done by pinpointing the key elements for the design document and working them into the overall design phase. It will also be an integral part of what I plan create in the design cards, a readymade and easy to use system which will allow ultrafast prototyping with realistic sizes and forms and ratios so a cleaner and clearer vision of the apps final style can be quickly formed by the users.

Using material design in the redeveloped design documentation

Core Affect and the Psychological Construction of Emotion

 

Core affect and the pyschological construction of emtion paper by Jmes A. Russell.

 

“At the heart of emotion, mood, and any other emotionally charged event are states experienced as simply feeling good or bad, energized or enervated. These states—called core affect—influence reflexes, perception, cognition, and behaviour and are influenced by many causes internal and external, but people have no direct access to these causal connections. Core affect can therefore be experienced as free-floating (mood) or can be attributed to some cause (and thereby begin an emotional episode).” James A. Russell

Core affect explanation

Core Affect model (https://www2.bc.edu/~russeljm/publications/psyc-rev2003.pdf)
Core Affect model (https://www2.bc.edu/~russeljm/publications/psyc-rev2003.pdf)

The core affect and the psychological construction of emotions has been used throughout other work in HCI because it allows people to accurately interpret, predict and understand emotions and their context. Core affect see’s the subject has having two axis the pleasure and displeasure and the activation or deactivation. When laid together you can chart where various emotions will be. Core affect is where you are on this model which is being continually reassessed by the subject in an ongoing feedback loop. Emotions are not outside of this model such as “Fear of a bear” this would be on the model of high activation and high displeasure they are all part of emotional episodes which are part of the core affects reassessing and taking in new information.

The emotional episode or feedback loop as I am viewing it works as such

Antecedent event – An external event.

Affective quality – the event is perceived by the subject in its affective quality I.e. how pleasant/unpleasant exciting boring etc. the antecedent is.

Core affect – Core affect begins to change in response to the perceived affective quality of the antecedent event. This is happening continually.

Attribution – The core affect felt is attributed to the antecedent event (Which now become the “object”) that object makes me feel *****

Appraisal – cognitive processing of the object, qualities, future impact on goals/outcomes (This is closely linked to core affect in that the subject is more likely to process qualities which align with their current core affect, I.e. You see the bad in the object when you are feeling bad to begin with.)

Instrumental action – activity is directed at the object in response to its effect on core affect and appraisal. This takes into account circumstances, resources any goals etc.

Physiological and expressive changes – “Facial, vocal, and autonomic changes occur and are accounted for (a) by core affect and (b) as part of, preparation for, or recovery from instrumental action.”

Subject conscious changes – “there is a flood of metacognitive judgments” much feels beyond conscious control and these are aligned with the core affect.

Emotional meta-experience – The subject experiences the emotion of being “afraid” or “angry” a self-perception and categorisation of the current emotional state.

Emotional regulation – deliberate self-control over the emotion with the social and circumstantial rules by the subject.

 

(https://www2.bc.edu/~russeljm/publications/psyc-rev2003.pdf)
(https://www2.bc.edu/~russeljm/publications/psyc-rev2003.pdf)

 

How it can be used in the HCD project

The model can be easily worked into and integrate with activity theories models to help add more meaning to the links between say outcome/ object and explain why a subject will be attempting to reach that outcome through emotion.

“Decisions thus involve predictions of future core affect (March, 1978). Core affect is involved in motivation, reward, and reinforcement” Which aligns on activity theories cases of subjects performing activities to reach objects which won’t directly benefit the subject, but will in the long run or “predicted future” will results in a positive gain.

I can also possibly use the model to chart where the core affect should start and where it should end after using the software. This gives you a clear guide when designing as to what kind of stimuli need to be included and lets other designers know the journey a user “Should” be taken on when using the artefact.

This model will be excellent and helpful when trying to create or tell an emotional journey for the artefact. It should allow users of the theory to pin point exact areas which are designed to elicit emotions or act as antecedent events and how they should look and feel in order to properly alter the core affect or “emotions”.

Core Affect and the Psychological Construction of Emotion

Artefact redesign redesign

“making my own way”

 

As I have developed my understanding of both human centered design and other theories and concepts which I am hoping to incorporate into my artefact I have hit upon the notion that the HCD tool kit which I have begun using to redesign the Ascesis blog is unfortunately no longer fit for task and is also does not fit my personal use in many cases requiring large teams and large amounts of unattainable data. While the core concepts are still completely valid it misses out on many areas which are vital to the outcome of the creative project.

This has given me the idea to shift my focus for the artefact away from the redesign of the blog and towards the possibility of redesigning the actual methodology and creating a toolkit of my own which takes into account many of HCI, IA, UX, UI, activity theory, cybernetics and cyborg, theories models and concepts I have been grappling with to create a web design focused document which can brought to bear on any future projects, in particular the creative project.

I will use the IDEO toolkit as a starting point for the creation of the toolkit. Following its format and layout where it makes sense but working in the other concepts I wish to be a part of the methodology. By doing it this way it allows me to tailor the toolkit specifically to my needs for the project and also should results in a better quality outcome when it is used. I will then compile the information into a step by step process and produce a design documents which will be used for the creation of the creative project in the second part of the unit.

Artefact redesign redesign

Material Design

“Focus on the user and all else will follow.” google

 

Google material design.

 

Material design is a design language developed by google. It is designed to “Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.” By creating a design language google hopes to develop a single system which can be used across all of their platforms and the huge variety of devices on the market while providing an excellent user experience. Material design is obvious focuses on app and touch usage at its first glance, tailored to suit both small mobile devices as well as larger screens but pushing mobile devices to the forefront.

While material design is made up from a large number of rules and guidelines it has a few core principles which are applied across the design language. These are

Material is the metaphor

The material in material design is given form from real world materials and tactile, it is designed to echo physical paper or constructions but not be constrained by physical restrictions. This allows users instant recognition and makes it easy for any user to quickly pick up the meaning of the information presented to them. By using realistic lighting and forms they can quickly show how the interface works and provide intuitive controls to users.

Bold, graphic, intentional

Strong use of colour, scale, white space and typography allows the user to immerse themselves fully into the experience, by giving an emphasis on the core user actions through these methods they further enhance and make the user experience intuitive.

Motion provides meaning

Motion is used much more than older designs, it provides a means of focusing attention and generating feedback for the user to better understand and use the software.

Material design will feature prominently in the HCD project. It will be worked into the overall design document as well as the final design as a way to help standardise and streamline the process by using a platform which is tried and tested and already tailored towards working on a variety of devices. While limiting myself to a particular design language may seem anathema to many of the ideas and theories within HCD I see it more as providing a starting point or skeleton from which to design from, and as Cordell Ratzlaff (Head of UX at Google) said “Great design happens within constraints”.

My first sloppy attempt at practicing some of the material design language.
My first sloppy attempt at practicing some of the material design language.

In later blog posts I will go into detail and layout the various rules and guidelines which will be factored into the design, But it is at this point that the idea behind simply designing a blog using the HCD method with a few tweaks has changed. I am planning on exploring the idea of redesigning the overall design methodology to incorporate the ideas, concept and research I have come across to create one for myself in a form similar to IDEO’s which I and others can use to aid in web design and app design.

Material Design

Activity Theory

Part 2

Activity theory original article.

Activity Theory, collaboration and analysis

In my last entry I was looking main at how activity theory works and the various elements which go into making it up. Here I will look at activity theory as it relates to groups and collaboration, then go onto discuss activity theory in HCI. After that I will briefly describe how it is already used in a similar manner as human centered design.

The model for the theory when collaboration and group work is added in is below. By following the lines and reasoning like the first model you can begin to see how each of these steps influence and effect each other within the model. For example the subject must follow the rules, whiles the rules let that particular subject know the confines they must work in. While the subject also has a part in the division of labour the division of labour also has an effect on the subject and so forth. When large projects or multiple teams are working together it is entirely acceptable to use multiple different models which work together to produce different outcomes which will eventually link to become a complete outcome.

Activity theory model complete (https://www.interaction-design.org/encyclopedia/activity_theory.html#heading_Engestr���¶m)
Activity theory model complete (https://www.interaction-design.org/encyclopedia/activity_theory.html#heading_Engestr���¶m)

“A key tenet of Engestrom’s framework is that activity systems are constantly developing. The development is understood in a dialectical sense as a process driven by contradictions. Engestrom identifies four types of contradictions in activity systems:

  1. Primary contradictions are inner contradictions of each of the nodes of an activity system. For instance, the mediating means used by a physician include various medications which, on the one hand, have certain medical effects, and, on the other hand, are products with associated costs, legal regulations, distribution channels, etc.
  2. Secondary contradictions are those that arise between the nodes of an activity system. For instance, a certain type of medical treatment may be unsuitable for certain patients
  3. Tertiary contradictions describe potential problems emerging in the relationship between the existing forms of an activity system and its potential, more advanced object and outcome. The advancement of an activity system as a whole may be undermined by the resistance to change, demonstrated by the existing organization of the activity system.
  4. Finally, quaternary contradictions refer to contradictions within a network of activity systems, that is, between an activity system and other activity systems involved in the production of a joint outcome.”

Activity theory in HCI

Activity theory only started to gain popularity within HCI in the early 1990’s as the limitations in information processing psychology become obvious. This was also as HCI was expanded to include the larger scope of areas which would come to fall under the purview of HCI such as motivations of users, social context and content etc.

“The impact of activity theory on HCI and interaction design in the last two decades has been, essentially, threefold. First, the theory offered some general theoretical insights that resonated with the need for a richer conceptual framework which would allow the field to move from the “first-wave HCI” to the “second-wave HCI” (see Cooper and Bowers, 1995). Second, it served as an analytical framework for design and evaluation of concrete interactive systems and stimulated the development of a variety of analytical tools. Third and finally, the application of the approach, especially in recent years, resulted in a number of novel systems, implementing the ideas of activity-centric (or activity-based) computing.”

What I hadn’t come across before was the idea of activity theory being turned into an analytical tool and design aid in the form of check lists and other tools. This brings it more and more into almost direct competition with the idea of human centered design which the project is being built around. However activity theory focuses more on the fact the user will be using the computer or software as a meditation tool to come to an outcome, rather than as an outcome itself.

While human centered design in the form I have followed does take into account many of same considerations it also seems to be lacking some of the depth and also the durability of a more modern(?) model such as activity theory. Don Norman of Apple has indeed said that activity theory centric design should completely supersede human centered design. Ultimately both concepts are not predicative “theories” but instead are developed in order to help designers to better understand what they are designing for. Moving forward from here I intend to further research activity theory and attempt to draw from it elements which could best be integrated into human centered design, my ultimately goal here is retain the ease and usability of the IDEO human centered design approach but include the focus and depth afforded by activity theory. Obviously more research is needed.

 

Activity Theory

Activity Theory

Part one

Activity theory original article.

“…a powerful and clarifying descriptive tool rather than a strongly predictive theory. The object of activity theory is to understand the unity of consciousness and activity…Activity theorists argue that consciousness is not a set of discrete disembodied cognitive acts (decision making, classification, remembering), and certainly it is not the brain; rather, consciousness is located in everyday practice: you are what you do.” – Bonnie Nardi

Activity theory while a useful and powerful tool has proved to be rather difficult to get my head round, while writing out the blog post I often found that I was unable to put into words exactly the way I understood it, so is have chosen to borrow heavily from the original text as this has an excellent way of demonstrating many of the points along with some images and diagrams. However over all the theory has proved that it can be very useful for HCD project as it is designed to look at the very core how why a user or human will perform the acts they are performing allowing to better analyse and “hear” the needs of the user. Below is a short description of the theory to explain it and some other notes I took away from the theory.

An example taken from the text showing how subject and object work with each other “Undoubtedly, whether or not a person can solve a math problem depends on the nature of the problem (e.g., how difficult it is) and the person’s abilities and skills (i.e., how good the person is at math). In the long run, however, the opposite is also true: both the object and the subject are over time transformed by the activity. It is apparent, for instance, that a person’s math skills are a result of previous experience: they have developed through solving math problems in the past. In other words, while it is true that a person’s math abilities determine how the person solves math problems, it is also true that solving math problems determine the person’s math abilities. Therefore, subjects do not only express themselves in their activities; in a very real sense they are produced by the activities (cf. Rubinshtein, 1986).”

Object-orientedness

The subject or user interacts with the world through interacting (activities) with objects. A subject in this case can be any kind of entity from an individual (subject) looking to solve a maths problem. However the subject could the managing team of a design agency (the subject) looking to increase profits (the object). While the object in this case is intangible to a degree it has its “objective meaning” determined by its relationship with the subject and other objects and the “outcome” of the object is achieved through activities Performed by the subject.

“Therefore, the principle of object-orientedness states that all human activities are directed toward their objects and are differentiated from one another by their respective objects.”

Hierarchical structure

The hierarchical structure in its simplest form starts with a motive, this will determine the goal which is affected by the conditions, on the other side of this hierarchy the motive generates the activity, which is composed of an action, which is in turn composed of operations. So while the motive generates the activity, the goal results in the action and the condition determines the operations.

 

“In particular, people are usually aware of their goals and can report or express them in a certain way. Then the analysis can be expanded both “up”, to progressively higher level goals and, ultimately, motives, and “down”, to sub-goals and operations.” This allows for extremely in depth research for the HCD project when framing people’s actions using activity theory.

Mediation

Tool mediation is “the use of tools is a form of accumulation and transmission of social, cultural knowledge. Tools not only shape the external behaviour. As discussed below, through internalization they also influence the mental functioning of individuals.” In activity theory we use tools in our activities and to achieve our goals but the tools also affect the subject “If all you have is a hammer, everything looks like a nail.”

“It is mediation which has made Homo sapiens such a successful species: while we do not have sharp claws and thick fur, we compensate that by employing mediating artefacts, such as hammers, knives, and warm clothes.” Mediation is closed linked to cyborg theory.

Externalization and internalization

Again in their simplest forms, Internalization is the change from counting on fingers into counting inside your head. While Externalisation is sketching out a design or essentially taking and internal activity and making it external. These states are both transitions, part of the dynamics of activity.

Development

Development states that everything analysed through activity theory must be recognised to be changing and developing, since the theory is aimed at understating activity and subjects the fact that the world and technology along with the social conventions and goals are shifted must be taken into account. The whole system is also an integrated system, it is very hard to grasp and singular part of the theory without also having to reflect on all the other elements which are linked to it.

 

 

 

Activity Theory

Human Computer Interaction (HCI)

“Easy to learn, easy to use”

The original article written by professor John m. Carroll

Human computer interaction originated from computer science in the early 1980’s, it has since then grown to include a large number of other disciplines ranging from cognitive sciences and engineering to informing design and development. It arrived just as personal computers where becoming popular and represented the ideal platform for combatting the over complication of computer software or “software crisis” in the late 1970’s and by focusing on non-functional requirements such as usability and maintainability helped to shape and define how we interact with computers today. In its modern day form it can be considered to be an umbrella term for “fun, wellbeing, collective efficacy, aesthetic tension, enhanced creativity, flow, support for human development, and others” or in short the marriage of IA, UI and UX.

A visualization of the various fields involved with HCI taken from the original article.(https://www.interaction-design.org/encyclopedia/human_computer_interaction_hci.html#heading_A_caldron_of_theory_page_35313)
A visualization of the various fields involved with HCI taken from the original article.(https://www.interaction-design.org/encyclopedia/human_computer_interaction_hci.html#heading_A_caldron_of_theory_page_35313)

However HCI has now moved beyond just simple desktop computer interactions and now deals with the three main challenges facing developers, designers, computer scientists, communication scientists and everyone in-between. First going beyond the desktop interface as its obvious weakness to scalability became apparent the introduction and use of search functions. Second the huge impact of the internet not just on the way it works but also how this effects society, As it is now known social computing the ability to communicate not just with computers but rather through computers can be considered possibly one of the most important aspects of HCI. The third is the great variety of devices now on offer and ubiquitous computing found in nearly every theatre of life.

Ultimately “HCI is about understanding and critically evaluating the interactive technologies people use and experience. But it is also about how those interactions evolve as people appropriate technologies, as their expectations, concepts and skills develop, and as they articulate new needs, new interests, and new visions and agendas for interactive technology.”

The task-artefact cycle

The task-Artifact cycle (https://www.interaction-design.org/encyclopedia/human_computer_interaction_hci.html#heading_A_caldron_of_theory_page_35313)
The task-Artifact cycle (https://www.interaction-design.org/encyclopedia/human_computer_interaction_hci.html#heading_A_caldron_of_theory_page_35313)

As HCI involves studying and analysis both sides of the development, both the users and how they use the artefacts alongside the artefacts themselves one of the core ideas arising from HCI is the task-artefact cycle. This is that as artefacts are created to solve the problems which has arisen this in term leads to them being used and creating a whole new level of opportunities whether positive or negative. The changing nature of this cycle means that HCI thrives on the “new” and that predicting the future is less like working out an equation and more like “world history”

HCI has huge parallels with HCD in terms of how it seems to flow and iterate, seeing change and new designs as a good thing and stagnation as bad, it recognises that we may be working with what seems like good technology to us but may actually be simply a reworked and optimised version of a miss step made in the design over two decades ago. HCD should act as good partner when viewed in terms of HCI as it is naturally built as a problem solving methodology which works alongside the task-artefact cycle.

Human Computer Interaction (HCI)