Should I place a product picture on the left or on the right?
I’m customizing an ecommerce solution and I noticed that most people would place product pictures on the left, but I wonder if there is a reason behind it.
I would like to have my pictures on the right, and I even have an ol…
WAMMI vs SUS global score
are the global scores of the WAMMI and SUS questionnaires comparable? Does a website with a WAMMI score of 95 have a better usability than a website with a SUS score of 85? If they aren’t directly comparable is there a known …
How can I best display a blank space character?
A web app I’m writing singles out individual characters found on a traditional keyboard. I have a very limited area in which the character can be displayed (which is basically the width of a W character in the font I’m using) meaning I can’t display the word “space” or “blank space”.
How can I best display the blank space character?
I’ve tried a couple of options, but I’m not sure if these would just lead to confusion:
- Using underline. This looks a bit too similar to the underscore character.
- The space symbol (
␠
(␠)). I didn’t even know this existed until I started looking for answers to this question myself, so I’m not sure if this is widely recognised. - A faint bottom border in a different colour.
- A block character (
█
(█)) like those used in a terminal to represent the cursor. - A blank space with no style applied.
I suppose it’s worth noting that this is purely for display purposes; the user has no interaction with the character other than acknowledging it’s there when reading through the page (so I’m not asking about What character can I use to represent the space bar?).
How can I best display a blank space character?
A web app I’m writing singles out individual characters found on a traditional keyboard. I have a very limited area in which the character can be displayed (which is basically the width of a W character in the font I’m using) meaning I can’t display the word “space” or “blank space”.
How can I best display the blank space character?
I’ve tried a couple of options, but I’m not sure if these would just lead to confusion:
- Using underline. This looks a bit too similar to the underscore character.
- The space symbol (
␠
(␠)). I didn’t even know this existed until I started looking for answers to this question myself, so I’m not sure if this is widely recognised. - A faint bottom border in a different colour.
- A block character (
█
(█)) like those used in a terminal to represent the cursor. - A blank space with no style applied.
I suppose it’s worth noting that this is purely for display purposes; the user has no interaction with the character other than acknowledging it’s there when reading through the page (so I’m not asking about What character can I use to represent the space bar?).
Creating an animation and interaction stylguide
extending to the animation aspect of a style guide that we have already built for our ecommerce website and app, What area’s of the UI do you need to look at.
These are currently what I could break it down into 3 things
T…
product details page with different variations
i am working on a product details page for an ecommerce website and i am dealing with complicated products like (sofa , bed ..etc) in these pages we have a lot of variation regarding colors and sizes.
can you suggest complic…
Is it a good practice to remember checkbox selection across multiple pages in a grid?
Suppose I need to select multiple items across pages and then apply an action (click of a button) on it.
Is it a good idea?
If user wants to know what he/she has selected then can I help him by allowing sorting on the chec…
Design for Real Life
No one who attended An Event Apart in 2015 can forget the story. AEA co-founder Eric Meyer and his family were vacationing at a beach resort in New Jersey when their youngest daughter, Rebecca, fell frighteningly ill. There was no room for her parents in the helicopter that immediately airlifted Rebecca to the Children’s Hospital of Philadelphia, so Eric and his wife Kat followed her as passengers in a good Samaritan’s car.
None of the people in the car knew where the hospital was located or what they were supposed to do when they got there. And while panic and grief had not yet set in, the shock of the fast-moving events prevented everyone from thinking clearly.
As the vehicle sped toward Pennsylvania, it finally occurred to the passengers that the hospital must have a website, and that every smartphone in the car was also a powerful computer connected to the internet.
Eric quickly located the hospital’s website—and although the site was in English, although it was professionally designed, although it had been vetted by information architects and user experience professionals who were used to thinking in terms of identifying and meeting user needs, although it had likely been “user tested” against a standard set of user profiles, despite all the care and hours that had obviously gone into the site, it was meaningless and unusable to Eric and his family, given the emotional and mental state in which they found themselves.
UX pioneer Steve Krug famously advised designers not to make the user think; but what about folks who can’t think, because they’re experiencing a crisis the site’s designers never imagined or accounted for? This question, and others arising from it, nagged at Eric after the initial crisis with Rebecca was behind him. So began a search to identify and develop best practices for an audience that isn’t being served by our designs, and needs our help most.
Meanwhile, AEA speaker (and A List Apart editor-in-chief emeritus) Sara Wachter-Boettcher was working through similar issues in her content strategy practice (where she helps clients like The Associated Press, Home Depot, and Harvard learn from users, define messaging, prioritize efforts, and adapt for mobile)—and in her own life, when she found herself dealing with forms that asked deeply personal questions without giving any hint as to why, or what would happen to that information once it was given.
Sara and Eric teamed up to look further into these types of design failures, and how they could be anticipated and avoided.
The result, after more than a year of research (not to mention all those unforgettable presentations at AEA) is Design for Real Life (A Book Apart, 2016), the first design book to address the needs of the forgotten user in crisis—and users in other states not generally accounted for in most of our practices. From the book page:
Join Sara Wachter-Boettcher and Eric Meyer as they turn examples from more than a dozen sites and services into a set of principles you can apply right now. Whether you’re a designer, developer, content strategist, or anyone who creates user experiences, you’ll gain the practical knowledge to test where your designs might fail (before you ship!), vet new features or interactions against more realistic scenarios, and build a business case for making decisions through a lens of kindness. You can’t know every user, but you can develop inclusive practices that support a wider range of people. This book will show you how.
We’re delighted to bring you Eric and Sara’s insights via our sister publishing company, A Book Apart, and excited to see how your work will change as you identify stress cases, challenge your assumptions, design with compassion, and create experiences that support more of your users, more of the time.
You can order Design for Real Life from abookapart.com. If you missed Eric’s presentation last year, you can watch the video on our website (along with 30 hours of similarly compelling material from the likes of Kristina Halvorson, Jeremy Keith, Val Head, Derek Featherstone, and other industry thought leaders). And for more of Eric’s thinking on the subject of real-life design, don’t miss seeing him at An Event Apart Nashville, Seattle, and Boston—or any of the other cities where AEA will take place this year.
Modern Layouts: Getting Out of Our Ruts by Jen Simmons – An Event Apart Video
In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems, we all settled into a handful of patterns and stayed there for over a decade. It wasn’t until the arrival of responsive design that new ideas for page layout started appearing. Now with new CSS properties for layout landing in browsers, we may be about to see a bigger renaissance in layout design patterns.
How can we better use the space inside the glass rectangle? What layout innovations could help users better find and focus on what they want? In this 60-minute video caught live at An Event Apart Austin, Jen Simmons takes us on a journey through where we’ve been, where we might be going, and how we can better design for the true medium at hand. This video features plenty practical examples of what’s newly possible, plus access to a code repo for you to play with later.
Dubbed “the Terry Gross of the tech industry,” Jen is the host and executive producer of The Web Ahead. Her in-depth interviews explain emerging technology and predict the future of the web—and won the 2015 Net Award for Podcast of the Year.
Jen is a Designer and Developer Advocate at Mozilla, where she advocates for web standards and researches the coming revolution in graphic design on the web. She’s spoken at events including An Event Apart, SXSW, Fluent, Generate, Future of Web Design, and Respond.
Jen launched her first client website in 1998 and spent years making sites for small mom and pop shops, large organizations, and creative individuals. Her better-known clients include CERN, the W3C, Google, Drupal, Temple University, and the Annenberg Foundation.
Enjoy all the videos in An Event Apart’s library. And for your free monthly guide to all things web, design, and developer-y, subscribe to The AEA Digest. Subscribers get exclusive access to our latest videos weeks before anyone else!
Sticky submit button at top and bottom of the form?
Typical mental model suggests that submit button is at the end of the form. Should I go with button at top as well as bottom. since in our application we put action items on a sticky bar at top at top. But our user are not ab…