Web Design 101

UX Design

What?


  • Design user experiences: website, car navigation, tv system, …
  • Make people’s life easier.
  • We can’t consider UX if we forget people!

Why?


  • Tiny changes, high impact.
  • Fail early.

When it’s too late


How?


  • Be open-minded and kind.
  • Put end user first.
  • Talk to people.
  • Observe and question (not shiny::observe).

Don Norman Design principles 1


  • Visibility: clear features and steps.
  • Feedback: user action –> app reaction.
  • Constraints: avoid over interactions.
  • Consistency: buttons look like buttons, …
  • Affordance: can you guess what this unknown object is for?

Bad design is everywhere around us (1/X)


The “masochist’s teapot” by Jacques Caralman.

Bad design is everywhere around us (1/X)


A bad elevator button board.

Bad design is everywhere around us (1/X)


Bad design is everywhere around us (1/X)


I have winamp on my site 😵‍💫

🥼 Your turn: user experience
02:00


Tell us what’s the worst user experience your remember?


Ironically, mine was when establishing the ESTA to come to the US 👿

🥼 Your turn: about affordance (1/2)
01:00


  • old coffee grinder.
  • old ear amplifier.
  • Instrument to mimick starling calls.

🥼 Your turn: about affordance (2/2)
01:00


An old pacifier (~1800).

What about Shiny?


Web design is part of UX Design.


Shiny app design belongs to web design so UX design.


Production apps are used by many people … they deserve a good experience.

So what are we waiting for?

Good vs Bad UI

Pointless Inconsistency

Blog

A Story Before the Recipe

This story is about when I fell in love with Mexican food.

The Recipe

Here is where I detail the instructions to make Mole

Blog

A Story Before the Recipe

This story is about when I fell in love with Mexican food.

The Recipe

Here is where I detail the instructions to make Mole

Pointless Inconsistency

Blog

A Story Before the Recipe

This story is about when I fell in love with Mexican food.

The Recipe

Here is where I detail the instructions to make Mole

Button Distinction

Button Distinction

Primary buttons are the most important actions to which we want to draw users’ attention.

Secondary buttons are good for actions that require less emphasis but still require users’ attention.

Tertiary buttons represent less important actions a user can take.

Unaligned Elements

Lorem ipsum dolor sit amet.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusanti doloremque laudantium.

Lorem ipsum dolor sit amet.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusanti doloremque laudantium.

A note on alignment: Don’t align related items to different sides. Always try to aligning related elements to the same side because it connects them visually

Low contrast

Maya G

Maya G

Confusing forms

E-mail

me@domain.com


Password

*****

Error!

E-mail

me@domain.com


Password

*****

Password incorrect. If you don’t remember your password, reset it here.

Wrong color code

🥼 Your turn: what’s wrong here?
02:00


🥼 Your turn: what’s wrong here?
02:00


🥼 Your turn: why is it better?
02:00



Coronavirus tracker by John Coene.

🥼 Your turn: a little challenge 1
05:00

Web languages 101

Forewords

Mastering HTML and CSS is clearly not the goal of this workshop but you need to know where all of this come from to move to the next part.

🥼 Your turn: what’s behind a Shiny app?
05:00


  1. Run the below app and open it with Google Chrome:
ui <- fluidPage(p("Hello World"))
server <- function(input, output, session) {}
shinyApp(ui, server)


  1. Do CTRL + SHIFT + C Linux, F12 Windows, or Command + SHIFT + C on Mac (or just right click + inspect).

ABOUT HTML

Intro

<h1>Hello<h1/>

HTML is the markup language of the internet, where elements are written with opening and closingtags.

The tag here is h1, the highest level header. There are many types of tags.

This is the same as # Hello! in .Rmd

ABOUT HTML

Attributes: ID

<h1 id=“top_header” > Hello! <h1>

elements can have attributes that are specified using attribute="value". Here we’ve given our top level element the ID top_header.

You cannot have more than one element with the same id in an HTML document!

ABOUT HTML

Attributes: class

<h1 id=“top_header” class=“red_header”>Hello!<h1>

The class attribute can be used on multiple elements. While the top_header ID can only be used once, we can create many headers with the class red_header

HTML and LAYOUT

Box model

HTML tags follow the box model defining margins (space between elements), padding (internal margin), borders, width and height, …

HTML and LAYOUT

Flow layout

HTML tags lay in the page following the flow layout: inline tags flow in the horizontal direction, while block tags are stacked on top of each others.

HTML

Semantic tags

HTML tags can have a semantic contrary to div.

CSS


Cascading Style Sheets (CSS) is a property/rules based languages that lies next to HTML to style elements.

CSS supports more sofisticated layouts such as:

COMBINE HTML AND CSS

Style HTML tags with CSS

<h1 id=“top_header” class=“red_header”>Hello!<h1>

We can use CSS to create styling rules outside of our HTML, leveraging their attributes.

About CSS

Specificity

  • important!
  • inline
  • ID
  • class
  • element

Decreasing specificity from left to right.

Modern web toolkits


Benefit from more advanced CSS features such as grid.

About {bslib}


During this workshop, we’ll leverage {bslib} for the layout and colors, so you can focus on the features, rather than on the technical HTML and CSS aspects.


install.packages("bslib")


Under the hood, bslib offers a R abstraction for the Bootstrap framework.

If you’re curious 🤔