Co-design. (17-10-2016)

Participatory design (originally co-operative design, now often co-design). 

Is an approach to design attempting to actively involve all stakeholders (for example employees, partners, customers, citizens, end users) in the design process to help ensure the result meets their needs and is usable. Is focused on processes and procedures instead of a visual design. 

Recent research suggests that designers create more innovative concepts and ideas when working within a co-design environment with others than they do when creating ideas on their own.

During a co-design session we talk about the different processes of our agenda, the users and their assignments, what they will see, what they can do, the proper device for the use of the agenda, etc.

Board Games

Despite what one might initially think, board games are not simply a fun game, but also serve as a useful tool in order to obtain more information about users.

Main Idea: 

A board game in the context of software engineering is based on a regular traditional board game, but usually with slight modifications so it works better in context. For example one could use a pre-existing board game like "Snakes and Ladders" or "Monopoly" as basis for the gameplay of the project, and then subsequently change the aesthetic and visual design in order to apply it to your product. For examplle, instead of  using Monopoly's design which is based on a housing district, one could keep the basic ideas of squares around a layers advance, and yet place it inside a school or another environment more appropiate for the investigation. 
The key aspect of using board games is to acquire accurate information regarding your users, it is usually better to directly observe how others act than to simply ask them about their actions, because by asking there is always the risk of the person lying or not being sufficiently self aware to objectively analyze their own behaviour.

Benefits: 

a)  The principles of gamification are being applied.
b) It forces participants to speak, otherwise conversations might be dominated by 1 or 2 people with everybody else being silent.
c) Allows cooperation.
d) Useful for creative proccesses.

  

Use Case Diagrams

Use case diagrams are a form of visual representation of a specific system, it is similar to UML diagrams, except that use case diagrams are more general and can be applied to any kind of system, process or anything like those. Use case diagrams are used to ilustrate the various processes, steps, and relationships between different elements of a system. An example of one is the following:

 

 Elements of a Use Case Diagram:

a) Actors: An element (usually a person), that must interact with the system and exerts change.
b) Requirements: Enclosed in Ovals, these represent the specific actions that must be done. It is important to note that these actions follow a specific syntax, that of verb + noun, for example, in the above diagram, one action that can be performed is buy painting.
c) Use Case Relations: These are the lines that connect the various idead together.

Other Use Case Diagram Relationships:

a) Inheritance: You use this whenever you want to ilustrate a scenario in which a specific class acts slightly different than the general idea. For example, creating a publisher blog is a specific form of creating a blog.
b) Extends: Whenever you want to create a similar scenario to the main general idea, but that has the capacity to change if the situation warrants it. For example, normally a program would execute commands A,B, C, however if something goes wrong it might function as A, B,D. 
c) Include: Where a use case at some point reuses all of the steps of another use case.

Page Grids II

UI Web Patterns.

• Many common interface patterns today almost seem obvious, but are still well worth taking a look into considering their importance
• Patterns are tested and tried and with the right use, can create highly functional and easy to navigate websites.

Picture Manager

• Use thumbnails, item views, and a browsing interface to create a familiar structure for managing photos, videos, and other pictorial items.

News Stream

• Show time-sensitive items in a reverse chronological list, with the latest items at the top. Update it dynamically , and combine the items from different sources or people into one single stream.

Settings Editor

• Provide an easy-to-find, self-contained page or window where users can change settings, preferences, or properties. Divide the content into separate tabs or pages, if you need to manage large numbers of settings.

Alternative Views

• Let the user choose among alternative views that are substantially different from the default view.

Many WorkSpaces

• Use multiple top-level tabs, tab groups, and windows so that users can view more than one page, project, file, or context at a time. Let users place these workspaces side by side if possible.

Fat Menus

• Display a long list of navigation options in drop-down or fly-out menus. Use these to show all the subpages in site sections. Organize them with care, using well-chosen categories or a natural sorting order, and spread them out horizontally.

Animated Transitions

• Shows where your application is minimized so you can know where to go when you want it again
• Put two side-by-side panels on the interface. In the first one, show a list of items that the user can select at will; in the second one, show the content of the selected item.

One-Window Drilldown

• Show a list or menu of items in a single window. When the user selects an item from the list, show the details or contents of that item in the window, replacing the list

List Inlay

• Show a list of items as rows in a column. When the user selects an item, open that item’s details in place, within the list itself. Allow items to be opened and closed independently of each other.

Grid of Equals

• Arrange content items in a grid or matrix. Each item should follow a common template, and each item’s visual weight should be similar. Link to jump pages as necessary.

Radial Table

• Show a table or list of items as a circle instead of a column. Draw connections among items through the interior of the circle.

Infinite list

• At the bottom of a long list, put a button that loads and appends more items to the list.

Password Strength Meter

• Give the user immediate feedback on the validity and strength of a new password while it is being typed.
• The trend is towards forcing the user to choose a good password. In today’s world, this is sometimes a necessity.

Liquid Layout

• As the user resizes the window, resize the page contents along with it so that the page is constantly “filled”.
• You have to make conscious decisions about what to change, where to change it and even if remove and add information.
• Many decisions about what to work on (and how to work on it), e.g., mobile-only page, dedicated app, etc., will be based on time, budget and hard judgement about what is really necessary.

Deep Background

• Place an image or gradient into the page’s background that visually receds behind the foreground elements.
  

  

  A website with poor design, this is something we must avoid.

Page Grids

1.- Page Grids- Divine Proportion

What exactly is Golden ratio?

• 1.618033988749895  aprox -> 1.618
• Related to the sum of the Fibonacci sequence

Page Grids - Rule of thirds

• Alternative to divine proportion.The four points formed by the intersections of these lines can be used to place the most important elements - the elements you’d like to give a prominent or dominant position in your designs.
• Be careful with responsive design. Responsiveness should respect this rules for aesthetic results.

Page Grids

• Websites have a need for consistency for:
• main areas (ads, branding, navigation, and general content)
• Even for unconventional layout designs.
• While there are a few variations of this design pattern, the following generally applies:
• Branding(logo, tagline, etc.) are at the top left
• Navigation is towards the top, preferably as left as possible.
• Content lies within the middle of the page.
• Adds are to the right, in a secondary spot
• Footer content includes things that are not essential, but should still be usable and interesting since it is the last impression on the reader

2.- Vertical navigation Bar

• Left or right navigation bars have become less and less common as we tend towards more simplistic websites and horizontal navigation
• Vertical sidebar navigation is perfect for more complex navigation
• Take Amazon.com for example

3.- Horizontal navigation bar

• More simple forms of navigation (less than 10 categories), this interface can be a huge space saver.

4.- Modular Tabs

• Modular tabs can compact extra content in a clean and organized way, and hide it until it is wanted by the user.

5.- Breadcrumbs

• Breadcrumbs (a path which shows from where one came from) are a visual representation of navigational hierarchy.

6.- Archives

• A smart archive design pattern though can display all the content on one page, by title, date and possibly category.

7.- Content Footers

• Fat footer content is best for leading the user to new content at the end of the page, and so should therefore be easily scannable and in a format that is intriguing.

8.- Pagination

• UI Patterns describes pagination use in terms of design solution as follows.
• bits that are manageable for the user to read an cope with
• conveys information to the user about, how big dataset is

9.- Lazy registration

• Interface design is all about not making the user think, and a lazy registration page can help in doing just that.

10.- Form Wizard

• Wizards break down and label steps, so the user can identify where they are in the process and how much more work is required.

11.- Hierarchical actions

• Simple things such as a shape around a primary action and plain text for the secondary action, change in color vibrancy
• Create hierarchical order between two or more items
• People is lazy. Use the fact that most people will only read/notice big and shiny things to your advantage
  
  

  

   An example of a website with poor design, this is something me must avoid

Interviews

When designing an interview, there are key aspects one needs to consider, such as:
 a) Participants:

1) Choosing Participants:

• Representative of target users
• May be current users of a similar system
• Might also be the non-user
  
  

2) Recruiting participants

• Get a diverse set of stakeholders
• Use incentives and motivation
• Approximate better than nothing 
  
  
  

b) Questions

1) Types of questions to avoid

• What they would do/like/want in hypothetical scenarios
• How often they do things
• How much they like things on an absolute scale
• Avoid binary questions

c) Performing the interview

1) Conducting an interview

• Introduce yourself, explain your purpose
• The interview is about them, not you
• Begin with open, unbiased questions
• Ask the questions and let them answer
• A little bit of silence is golden(Keep calm and be patient)

2)Follow up

• Adjust your questions to their previous answers
• Ask questions in language they use/understand
• Pick up on and ask for examples
  
• Be flexible
  
  

 d) Post Interview Considerations:

1)Audio/Video: Drawbacks

• Time-consuming to review/edit
• Can change participants responses
• Requires permission

2) Share with your team

• Stories
• Photos
• Sketches
• Quotes

3)Save records - It’ll help later

• Keep photos, notes, artifacts

4) Diary Studies

• Give people a diary that they complete at a specified time or interval
• Structured task
• Can use journals, cameras, voice, video
• Tailor the recording to the context
• Can scale better than direct observation
• Easier tools -> better results
• May require some practice, training, reminding