User Interface that works | Sergiu Puscas | CodeWeek 2015

transcript

User Interface Design

USER INTERFACE DESIGN

Design is a method of problem solving.

What is design?

The main goal of design is offering the product functional, technical, aesthetic, ergonomic and economic qualities, in order to make it accepted by the consumer for a certain period of time.

The essence of design is, in fact, creating efficient products.

What is good design?

DIETER RAMS

Dieter Rams is a German industrial designer closely associated with the consumer products company Braun and functionalist industrial design.

Types of designUSER INTERFACE DESIGN

INTERACTION DESIGN

Interaction design is heavily focused on satisfying the needs and desires of the people who will use the product.

USER INTERFACE DESIGN (UI)

USER EXPERIENCE DESIGN (UX)

GRAPHIC DESIGN

Graphic designers work with graphical images, whether they be illustrations, typography, or images, and on a variety of media including print and web.

INDUSTRIAL DESIGN

Industrial designers create physical products designated for mass-consumption by millions of people.

User InterfaceUser Interface (UI) design is the design of software or websites with the focus on the user's experience and interaction.

The goal of user interface design is to make the user's interaction as simple and efficient as possible.

Elements of DesignLINE / SHAPE / DIRECTION / SIZE / TEXTURE / COLOR

Elements of Design

The link between two points.Linear marks made with a pen or brush or the edge created when two shapes meet.

• Self contained defined area of geometric, or organic form.

• Regular surfaces have geometric shapes (circle, square, rectangle, triangle etc.)

Elements of Design

DIRECTION

Horizontal suggests calmness, stability and tranquility.

Vertical gives a feeling of balance.

Oblique - growth, descendance etc.

Elements of Design

Relationship of the area occupied by one shape to that of another.

Elements of Design

TEXTURE

The surface quality of a shape - rought, smooth, soft, hard, glossy.

Elements of Design

The light reflected off objects.

• RGB

• HEX

• CMYK

• HSB

Elements of Design

Design PrinciplesBALANCE / PROXIMITY / ALIGNMENT /

REPETITION / CONTRAST / SPACE

Principles

BALANCE

Balance provides stability and structure to a design.

• Symmetric balance (through reflection, translation, rotation)

• Asymmetric balance

• Optic balance (formal, informal)

PROXIMITY

Relationship between elements. It provides a focal point.

Principles

ALIGNMENT

Aligning elements allows them to create a visual connection with each other.

Principles

REPETITION

Helps create association and consistency.

Principles

CONTRAST

Juxtaposition of opposing elements. It allows us to emphasize or highlight key elements in your design.

Principles

The distance or area between, around, above, below, or within elements.

Principles

Visual weight and depth

Visual Weight and Depth

VISUAL WEIGHT

• Some things looks ”heavier” than others in a layout. They draw your attention more easily.

• Visual weight helps the user notice the important things.

• Visual weight is relative.

CONTRAST

• The difference between light things and dark things is called contrast.

• Assign a bigger contrast to the essential elements.

• We notice things that are close to use more than things that are far away.

• Bigger elements are perceived to be closer.

• Blur effects or shadows it just matkes the perception of depth more realistic.

• More important object have to be bigger, in order to create a visual hierarchy the user will follow.

Questions?

WHY IS IT IMPORTANT?

Typography

Typography represents the art and the process of arranging text for different media environments.

Typography is made up of characters, which create the font.

Characters - letters, numbers, punctuation marks.

By learning the history of typography, the anatomy of characters, as well as the classification of fonts - we become aware of even the slightest differences between fonts.

Typography

Anatomy

Typography

Anatomybaseline - the line on which the letter is based, namely the corresponding horizontal serifs.

meanline - the imaginary line above the minuscules. This height is extended from the baseline until the meanline

and is marked with X.

ascender - the height of the superior extension of small letters, i.e. the part above the meanline of the upper and

lower case letters.

descender - the height of the inferior extension of small letters, i.e. the part below the baseline of the lower case

letters.

ligatures - 2 or more characters connected in a single one. A typographic subtlety compensating for the

unaesthetic arrangement of some letter combination, such as: fi ff,fi, fl, ffi, ffl.

stress - the axis of the rounded letters.

Typography

Hierarchy

Take a good look at the size of the font you’re using. Have a break before deciding which one to use. Plan, keep the consistency, make sure it blends well with the other sizes.

Typography

Emphasizing textSometimes we need to emphasize some words or some paragraphs in a text. How do we do that?

Typography

Combining fonts

http://fontpair.co/https://www.google.com/fonts

http://100daysoffonts.com/http://femmebot.github.io/google-type/

http://designmodo.com/great-font-combinations/http://webtypography.net/toc

• Goal

• How many fonts should I use?

• What is my content like?

• How can I make a good combination?

• Accordance

• Contrast

• Conflict

Colors

Lucrul cu culorile

Colors

Working with colorsColors can be “loud” or “quiet”.

Colors

Working with colorsWireframes in black-and-white. Focus on the function.

Colors

Working with colorsSometimes color is function.

Colors

Working with colorUse colors when and where they are relevant.

Colors

Color psychology• Choose one color

• Use color to create significance.

• Use the same shade everywhere.

Repetition & PatternsWhenever something in nature happens over and over, we will quickly notice.

Repetition & Patterns

We don’t see 6 individual cats, we see a group of cats. Typically, we analyse them from right to left.

Repetition & Patterns

If one of them stands out, it immediately draws attention.

We see a lot of relationships, because of the way they are aligned.

The closeness or distance between two objects creates a feeling of those objects being related or unrelated.

The cats from each group seem “together” like a team or a family.

ProximityRepetition & Patterns

Questions?

Functional Layout Design

Layout

Composition basicsThere has been noticed a close

relationship between art and

mathematics. But what would be the

formulas for beauty?

Philosophers, mathematicians,

architects and artists have tried to

answer this question for a long time.

Layout

Golden ratioThe Golden Section (sectio aurea in latin), notată cu litera greacă Φ (uppercase phi) sau și cu φ (lowercase phi), is the first irrational number discovered and defined in history. It’s approximately 1,618033 and can be found in the most surprising situations.

Layout

Golden RatioThe Golden Section can be found everywhere: in nature, mathematics, architecture, body proportions, arts, design.

Layout

Rule of thirdsUsed mostly in photography, has been imported to web design. It’s simpler and more widely used:you just divide the work space in 9 equal parts (3x3). The eye will be drawn to the intersection of the lines.

Layout

BalanceGood websites arrange graphical elements in such a way that the page is balanced.This doesn’t mean that the sides mirror each other - but that they have the same visual weight.

A page looks symmetrical when graphical elements look similar.

A page is asymmetrical when the elements are of different sizes, but they have the same visual weight.

Layout

White spaceWhite space is the area not covered by text or images, even if it’s not white. Covering every inch of the page is a mistake. White space calms and directs the eye towards the content, increasing its value.

Layout

HierarchySome links, text or images on the web page will be more important than others, and a good design highlights them.The elements that require more attention should be noticed first and guide the eye on the page. A bigger text can draw attention in the first place to a particular image or text.

Layout

Color• You don’t need more than 2 or 3

core colors for a good design.

• Choose colors that work well together in creating the required atmosphere for the website.

• Some colors are more flashy than others.

Layout

DepthThe typical web page looks like a single, bi-dimensional surface, but it doesn’t always have to be like that. Adding a 3rd dimension grants a bigger importance to the graphical units, depending on the proximity to the user or the overlapping over other elements.

Layout

Simplicity• If you continue adding elements just

because they look good, you will overload the design.

• A complex design, or too many animations distract and bother the user if there is not enough white space to offset them.

• Use flashy elements only if they have a specific goal, not just because you can.

Layout

The foldSome of the most popular (but wrong) old school concepts is “the fold”, which represents the top part of the website, seen when opening the web page.The idea of this theory is placing all the important information in this area.

Still, recent studies show that if the user will be interested by what he sees when opening the website, he will scroll down in order to find out more.

Layout

ImagesImages can direct the gaze of the viewer.

Especially images with people get a lot of attention and create empathy, if they’re well used.

The gaze of person in the picture will direct the gaze of the user as well.

The more emotion will be in the picture, the more interested will the viewer be.

Layout

ImagesAccording to a study, people have the tendency to look where they’re guided by the gaze of somebody else.

Layout

TitleOur eyes are attracted by text contrasting with the rest of the background. That’s why titles will capture the attention of the viewers.

However, don’t overuse with the use of large text. If the title has no connection with the text that follows, it’s better to use other attention-drawing method.

Layout

Call-to-actionCTA is a short text, usually located on a button - and requesting an action from the user.

Layout

Call-to-actionThe general formula for a good CTA:

Verb + Benefit + Urgency or Place

Layout

Call-to-action

Layout

Instructions• Instructions have to be short and direct

• Tell the user exactly what he has to do

• Express yourself clearly

Layout

Primary and secondary buttonsIn general, there are only two styles of buttons used - because the majority of them are from this two basic categories:

• Primary actions accomplishing the primary goal of the website or application.

• Secondary actions not performing on the primary goals.

Layout

Delete Cancel

Layout

LabelsUse the most common, easy and simple versions for tags and labels.

Questions?

Tools & Workflow

What is your primary tool for interface design?

Workflow

Design Workflow

SketchesWorkflow

WireframesWorkflow

Paper cutoutsWorkflow

StencilingWorkflow

Wireframing softwareWorkflow

Graphic Design SoftwareWorkflow

Presentation SoftwareWorkflow

Fidelity LevelsWorkflow

Block Diagrams

Grey Boxes

HF Text

HF Color

HF Media

HF Interactions

MockupsWorkflow

Mockups are the models of web design and one of the most effective mediums for communicating visual design.

“Wireframes are skeleton. Mockups are skin.”

PrototypesWorkflow

In addition to the information structure and visualizations of the previous two phases, the prototype introduces more depth to the UI, allowing users to:

• experience the actual content

• interact with the UI in a way similar to the final product

• predict and solve usability problems before further development

PROTOTYPES HELPS YOU

• work through a design

• communicate concepts

• sell an idea

• gauge technical feasibility

• test usability

Prototype ToolsWorkflow

Presentation Software

Coded (HTML)

UXPinInvision MockFlow JustInMind Axure OmnigraffleJustProto Flinto MarvelPixate

Layout

Atomic Design

Layout

Summary

SKETCHING – Quick brainstorming on paper.

WIREFRAMING – Establishing the skeleton with rectangles and rough shapes.

MOCKUPS – Injecting details in wireframes, such as colors, typography, photos and visual design elements.

PROTOTYPING – Adding interaction to mockups, by linking pages and page elements, adding animation or interaction for advanced prototyping.

DEVELOPMENT – Converting the prototype into the final product via programming.

Questions?

Web User InterfacePatterns

http://ui-patterns.com/patterns

carousel

content

images

features

contacts

typography

UXPin Mobile UI Design Patterns

https://www.google.com/design/spec/patterns/

Android Patterns

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

iOS Patterns

It’s Not UX vs. UI

In the web context, let’s say that the designer decided to use the drag-and-drop option for organising songs in a list. This is UI.

Now, let’s say that the users are choosing this website over the competitor ones, because they like how easy and fast is to

organize their favourite music. This is UX.

It’s UX & UI

Tips & Techniques1. Keep the interface as simple as possible.

2. Create coherence and use well-established patterns and elements.

3. Follow a goal when creating a page interface.

4. Use color and texture strategically.

5. Use the rules of typography for creating hierarchy and readability.

6. Make sure that the system notifies the user about what happens.

7. Think about implicit values.

Sources

1. http://www.telegraph.co.uk/technology/apple/8555503/Dieter-Rams-Apple-has-achieved-something-I-never-did.html

2. https://www.vitsoe.com/gb/about/good-design

3. http://gizmodo.com/343641/1960s-braun-products-hold-the-secrets-to-apples-future

4. https://en.wikipedia.org/wiki/Interaction_design

5. https://en.wikipedia.org/wiki/User_interface_design

6. https://en.wikipedia.org/wiki/User_experience_design

7. http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/

USER INTERFACE BASICS

1. http://designmodo.com/web-typography/

2. http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706

3. http://freelancefolder.com/typography-essentials-a-getting-started-guide/

4. http://www.creativebloq.com/typography/better-web-typography-few-simple-steps-5132803

5. https://ia.net/know-how/the-web-is-all-about-typography-period

6. http://webdesign.tutsplus.com/articles/choosing-the-right-font-a-practical-guide-to-typography-on-the-web--webdesign-15

7. http://www.merttol.com/articles/web/checklist-for-better-web-typography.html

8. http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-preface

Typography

1. http://studio.uxpin.com/ebooks/guide-to-mockups/?_ga=1.244361089.58065319.1445246311

2. http://studio.uxpin.com/ebooks/guide-to-prototyping/?_ga=1.46579747.58065319.1445246311

3. http://studio.uxpin.com/ebooks/web-ui-design-best-practices/?_ga=1.46579747.58065319.1445246311

4. http://studio.uxpin.com/ebooks/mobile-design-patterns/?_ga=1.46579747.58065319.1445246311

5. http://studio.uxpin.com/ebooks/guide-to-wireframing/?_ga=1.46579747.58065319.1445246311

6. http://tools.subtraction.com/interface-design.html

Tools and Workflow

1. http://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/

2. http://www.smashingmagazine.com/2010/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/

3. http://thenextweb.com/dd/2011/12/30/9-places-to-get-inspiration-for-your-websites-color/

4. “Five Simple Steps - A Practical Guide to Designing For the Web” Book

Colors

1. http://ui-patterns.com/patterns

2. http://smallbusiness.chron.com/rules-composition-design-art-graphics-30554.html

3. https://mockupstogo.mybalsamiq.com/projects/web/grid

4. https://docs.google.com/file/d/0Bx1232tOvCsfUGdXYmZiTGxHT0U/edit

5. https://en.wikipedia.org/wiki/Golden_ratio

6. https://en.wikipedia.org/wiki/Rule_of_thirds

7. https://boagworld.com/design/why-whitespace-matters/

8. http://blog.teamtreehouse.com/white-space-in-web-design-what-it-is-and-why-you-should-use-it

9. http://uxmyths.com/post/2059998441/myth-28-white-space-is-wasted-space

10. http://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design--webdesign-84

11. http://www.awwwards.com/understanding-web-ui-visual-hierarchy.html

12. http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/

Layout