recentpopularlog in

abberdab : ux   42

Priority Guides: A Content-First Alternative to Wireframes · An A List Apart Article
Simply put, a priority guide contains content and elements for a mobile screen, sorted by hierarchy from top to bottom and without layout specifications. The hierarchy is based on relevance to users, with the content most critical to satisfying user needs and supporting user (and company) goals higher up.
design  wireframes  content-first  mobile  ia  ux  requirements 
june 2018 by abberdab
Home | Laws of UX
Laws of UX is a collection of the key maxims that designers must consider when building user interfaces.

It was created by Jon Yablonski using paper, pencil and Sketch App for design, Gulp for development workflow automation, Sass for CSS preprocessing, and Nunjucks for HTML templating.

Typography is set in IBM Plex Sans and Plex Mono, an open-source typeface by IBM.
ux  laws  rules  guidelines  design 
january 2018 by abberdab
Inclusive Components
A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.
a11y  accessibility  components  component-libraries  ui  ux  navigation 
october 2017 by abberdab
Get rid of FoMO clutter around your SaaS. – The Rectangles – Medium
Discovery with the User Centered Design Canvas.

“If you run a business for people, you need to meet their needs. And we know that you have neither the time nor the money for research. With UCDC you don’t have to have either of those. Bear with me for 6 minutes and I assure you, you won’t regret it.”
UX  design  discovery  SaaS  products 
october 2017 by abberdab
Calm Technology
When we design products, we aim to choose the best position for user interface components, placing the most important ones in the most accessible places on the screen.

Equally important is the design of communication. How many are notifications are necessary? How and when should they be displayed? To answer this, we can be inspired by the principles of calm technology.1
ux  calm  distraction  ambient  technology 
september 2017 by abberdab
Signal vs. Noise: Color as a Wayfinding Tool | Viget
Used carefully, color can become a helpful wayfinding tool to better help a user know where she is and where to go next. When it comes to user interface design, you may want to limit your use of color. Instead, use it cautiously in very intentional and meaningful ways.
color  wayfinding  design  ui  ux  colorpalettes 
august 2017 by abberdab
Using Visual Loudness for Better Wayfinding | Viget
Well-designed interactive experiences use loudness to help identify and amplify wayfinding systems. Because, if everything screams all you will hear is noise. Emphasis used properly—like a loudspeaker in a crowded room—can help guide attention more effectively. Careful use of visual loudness helps illuminate priority.
color  colorpalettes  design  hierarchy  loudness  volume  wayfinding  ux  ui 
august 2017 by abberdab
A hard look at how the browse experience translates in the digital space
I thought I’d take a stab at exploring this concept as it relates to one experience in particular: browse. Designers have notoriously poured their blood, sweat and tears into browse experiences, and to what end? These experiences often overstimulate and under deliver.
ux  browsing  search  patterns  design 
august 2017 by abberdab
Our Articles | Viget
Nice reference articles on everything from color palettes to design systems to code snippets, unfortunately it doesn't have an RSS feed. :(
articles  ux  reference  design  process  content  code  strategy 
august 2017 by abberdab
scroll-behavior - CSS | MDN
With this property — The scrolling box can scroll in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.
scrollbars  scrolling  behavior  animation  ux  css  web  development 
august 2017 by abberdab
Designing The Perfect Slider – Smashing Magazine
When we think about a slider, we usually imagine an image gallery slider, or the infamous carousel, or perhaps off-canvas navigation, with the overlay sliding in from the side. However, this article is not about those kinds of sliders. Instead, we’ll look into the fine details of designing better slider controls for selecting a value or a range of values. Think of price range sliders, 360-degree-view sliders, timeline sliders, health insurance quote calculators, or build-your-own-mobile-plan features.

In all of these use cases, a slider is helpful because it allows users to explore a wide range of options quickly. For precise input, a slider can never beat a regular input field, but we can use a slider to nudge our customers to explore available options and, hence, aid them in making an informed decision.
slider  ux  forms  range  input 
july 2017 by abberdab
UI And UX: What's the Difference?
The digital world can be very exciting and puzzling. What are people talking about when they refer to the UI and UX of a product or website? Should you consider learning UX design yourself?
ux  ui  design  careers  titles 
july 2017 by abberdab
The Guide to Empathy Maps: Creating 10-Minute User Persona
UX designers know better than anyone — it’s what’s inside that counts. As in, the user’s thoughts and feelings, and how those affect what they say and do.

That’s where the empathy map comes in. When created correctly, empathy maps serve as the perfect lean user persona:

They quickly visualize user needs (especially to non-designers)
They fit perfectly into a Lean UX workflow as a starting point for user knowledge (you’ll build more as you prototype and test)
Because they’re quick to create, they’re easy to iterate as you revise assumptions based on real data
They prime stakeholders for your design ideas since they’ve thought beyond their own experiences
personas  ux  empathy-maps  templates  maps 
june 2017 by abberdab
Size and layout of e-commerce product grids: a user research case study
Comparison of different grids for ecommerce — scannability, conversion, etc. 3 across vs 5 across, etc.
ecommerce  research  ux  ui  grids 
june 2017 by abberdab
Design Better Data Tables –
Good data tables allow users to scan, analyze, compare, filter, sort, and manipulate information to derive insights and commit actions. This article presents a list of design structures, interaction patterns, and techniques to help you design better data tables.
css  data  design  tables  ux 
may 2017 by abberdab
Breadcrumbs For Web Sites: What, When and How — UX Planet
Breadcrumbs serve as an effective visual aid, indicating the location of the user within the site’s hierarchy. This property makes breadcrumb navigation a great source of contextual information for users.
navigation  ux  breadcrumbs 
august 2016 by abberdab
Empty States
A gallery of "empty state" screens. Screens presented to users when there is no data to display (yet).
ux  onboarding  empty-states 
july 2016 by abberdab
Ten Requirements For Making Home Page Carousels Work For End Users (If Needed) – Smashing Magazine
Carousels are not fundamentally terrible, they are just frequently implemented badly (or used when another option would be better). Guidelines for making your carousels a positive experience for you users.
carousels  usability  recommendations  ux  photography 
july 2016 by abberdab
A 5 day sprint with Clear Left exploring library self-service machine software
Last week we spent 5 days with digital agency Clear Left exploring how we might develop new self-service machine software for libraries. Here are a few observations about how Clear Left and a sprint
research  discovery  sprint  process  ux  requirements  products 
february 2016 by abberdab
Design machines | Louder Than Ten
RT @markboulton: “In editorial, the system is where design begins.”. Lots of smart words.
design  inspiration  ux  content-first  collaboration  www 
august 2015 by abberdab
Transitional Interfaces — Design/UX — Medium
Designers love to sweat the details. Much time is spent pixel-fucking buttons, form styles, setting type, & getting those icons as sharp as a tack. A+, great job, don't stop you guys.

...but there's little consideration about how it all fits together outside of a static comp. You tap a button and the form just ...appears? You swipe to delete an item and it just vanishes? That’s super weird and un-natural. Nearly nothing in the real world does anything as jarringly as just swapping states. It would feel like a glitch.
animation  ui  ux  dev  design  www 
april 2013 by abberdab
Typography for Lawyers
Really nice typography for beginners with basic concepts addressed in a straight-forward manner. Intended for lawyers, but would be apt for any one new to typographic concepts.
design  typography  for_beginners  for_laypeople  for_clients  ux 
july 2009 by abberdab
Accesskey standards | clagnut/blog
Standard Accesskeys and a comparison of their use by different standard bearers.
accessibility  standards  access-keys  reference  xhtml  html  dev  ux  www 
may 2007 by abberdab
A CSS Solution to Image Blocking - Campaign Monitor Blog
Tips for styling alternate content for when images are turned off - uses span tags and relative positioning. Neat technique!
css  email  standards  accessibility  dev  ux  www  how-to 
december 2006 by abberdab

Copy this bookmark:

to read