It's Lunch Share Time!

11/14/2019

Naming Things:

Element States

  • Hover / mouseover: mouse cursor is over the element
  • Active / mousedown: user is clicking the element, mouse button is pressed
  • Visited: user has visited this link before
  • Focus: user has reached the element by keyboard navigation, or the element is currently clicked (think input, textarea). Super important for accessibility
  • Blur: the element is not currently focused
  • Checked / Unchecked: specific to checkboxes
  • Current / Highlighted: not an actual programmatic state. Use this to describe the 'active page indicator' or a 'current tab'

Naming Things:

Positioning items

  • Static: the default behavior of elements in page. They scroll in sync with the window.
  • Fixed: the element does not scroll, it is fixed relative to the browser window edges. I.E. a fixed header, at the top of the window or a popup
  • Sticky: the element gains a fixed position for a short period of time. I.E. a table header that 'sticks' to the top of the window, until the entire table has been scrolled to, then it moves away from the screen.
  • Relative / Absolute: the element is positioned relative to it's 'parent container'. I.E. a dropdown menu will be absolutely positioned relative to it's parent menu.

Naming Things:

Images and Backgrounds

  • Static / Inline: the default behavior. Statically positioned, it will occupy as much space as it's allowed to, while preserving it's proportions and flow in the page. I.E. an image added by the editor inside an article.
  • Background-Size Cover: resizes and occupies 100% of vertical&horizontal space in it's container. Will usually crop either top/bottom or left/right. Most common approach for fullscreen and header images.
  • Background-Size Contain: the image will fit into the container, usually leaving empty spaces either on the top/bottom or left/right sides. Image is fully visible at all times.
  • Background-Attachment Fixed: a fixed background image will not scroll with the body, it will be fixed to the window edges. Used to produce those parallax/overlapping container effects a la Apple showcase pages.

Common gotchas

  • Breakpoints and Hovers: breakpoints do not suggest a device type. 1366px and above does not ensure the visitor is using a mouse. Could very well be a touchscreen device. Hovers should be visual indicators and no functionality should rely on it's existence (i.e. hover menus)

  • Scroll Hijacking:

  • 'Usability Nightmare' - Envato

  • 'This frustrates the living hell out of me' - StapleCreative

  • 'Scroll Hijacking is bad' - UXBooth

  • 4th in 'The top 5 most common UX Mistakes' - TopTal

  • 84% of visitors only interact with the first slide - VWO UX Platform

  • 'I found over 520.000 articles on why Scroll Hijacking is bad' - Google Assistant

Common gotchas 2

  • Be empathetic:

  • 1 Caption

  • Header, multiple rows

  • Body, multiple rows

  • Footer, multiple row

  • Nothing in-between these

  • Tables:

  • Align things from Top-Left to Bottom-Right

  • Avoid forcing the user to scroll up when long lists are present

  • Be consistent across screen sizes

  • Be considerate of users environment

  • Accessibility is the new black

A B C

D E F

G H I

A

B

C

A B

C D

E F

Common gotchas 3:

Mind your examples

Avoid taking examples from products. I.E. Amazon, Google, Ebay, Apple.

 

Product development is different than the  usual agency workflow.

 

Product development includes browser detection, agent-sniffing and a lot more backend setup than agencies afford.

 

Avoid at all costs (because, it costs alot!)

That's all folks!

Made with Slides.com