Is there a problem with using black text on white backgrounds?
Why do a lot of websites use a text color other than #000000 black when the background is white?
For instance, this text will be displayed using a dark grey:
.post-text {
color: #333;
}
Have some studies been made on t…
Is using a comma as a number separator a cultural thing?
In the US, it’s very common to add a comma for numbers of more than 3 digits (ex: 1,000 for one thousand ; 1,000,000 for one million ; etc.).
In France though, we don’t use this at all and commas are used for decimal numbers…
Is using a comma as a number separator a cultural thing?
In the US, it’s very common to add a comma for numbers of more than 3 digits (ex: 1,000 for one thousand ; 1,000,000 for one million ; etc.).
In France though, we don’t use this at all and commas are used for decimal numbers…
Editing an array of numbers which length is variable
For the needs of a line drawing program, I need to edit an array of integers. The only constraint on the array is its length, which has to be even, and greater or equal to two. The solution I have for now looks like this:
Th…
What are the best practices for mobile UX?
1) Don’t cut functionality. If it’s available on a real computer, make it available on mobile. More and more people are foregoing computers and only using tablets and phones. This is a shockingly common failure:
- YouTube failed this one epically by blocking half their content on mobile.
- Urban Spoon won’t let you put titles on restaurant reviews that come in through mobile.
- Wikipedia’s mobile pages do not include category tags, although at least it’s easy to switch over to the real webpage.
- I’ll list more as I think of them.
2) Mobile should be one (important) part of a platform-inclusive strategy that comprises computers with large monitors, laptops, netbooks, tablets, minitabs and microtabs, phones, “smart” TVs, and unforeseen new devices. The four most important form factor reference points would be:
Full-scale (PCs and Macs)
Mid-size (Tablets, Chrome/Netbooks)
Transitional (Minitabs – 6-8 inch tablets)
Pocket (Phones and microtabs aka “phablets”)
You should have designs for all four of these form factors as they represent distinct use cases with very different capabilities, and be able to transition between them smoothly with “responsive” design. This allows you to accommodate unforeseen form factors that fall in between without having to create a separate design for every single aspect ratio and size.
Nota bene: If you’re pressed for time or budget, focus your energy on the tablet experience. For many, that’s replacing full-scale computers, and in any case it splits the difference between mobile and PC so should be bearable on both.
If you cannot afford to develop separate mobile and computer UX, split the difference and design for tablets. A tablet site should function largely like a full computer site except for (A) suitability to portrait and landscape modes, (B) absence of hover functionality, and (C) distinct button-like delineations on hyperlinks.
3) How to decide whether to do a native app vs. a web app or website. Apps take up space on people’s phones or tablets. They are yet another object to keep track of for the user. This is why Google even built a notebook based on the principle that no applications would be stored locally. Assume you should first build a web app or website UNLESS:
a. The product is dependent upon nuanced UX functions best standardized to one device. E.g. anything with gyro or motion sensing.
b. The product uses a lot of routine, predictable CPU cycles that aren’t dependent upon outside data, cycles that are best processed locally rather than sent through your cellular service. E.g. a graphically intense video game without multiplayer or a calculator.
c. The product is likely to be used in an area without cellular or wireless internet or where the absence of said would be disastrous. E.g. a guide to edible plants, a flashlight app,
d. A product where speed and instant accessibility are paramount. E.g. a camera or sound recording app.
As for offering a native version of existing web functions, use the rule of thumb that unless a plurality of users are likely to put it on their phone’s home screen, it’s not worth the cost.
4) Otherwise, web first, app second. I can’t tell you how many clowns there are out there who make an iOS only app that is perfectly well suited to a website (see above) when they should have made a regular old website. It completely cuts out Windows, Mac, Android, and Blackberry users. An app that should be a website is a hipster conceit.
Take a look at Instagram. You cannot view your stream on a computer. It’s absolutely ridiculous. Aside from the problem of lack of accessibility, a user may wish to edit their photos on a computer with its superior UI instead of their finnicky phone.
5) No small or tightly spaced controls. Ever.
6) Make it work in landscape mode. Some people use phones with a built-in keyboard which automatically switches to landscape mode when the keyboard is deployed. Minitabs and microtabs, due to their size, may see users preferring mobile sites rather than iPad-optimized sites. For now, just about everyone who uses a mini/microtab is going to use it in portrait mode however if they make a keyboard expansion for Kindle Fire, that may change.
My GMail app does something astonishingly stupid in landscape mode: it increases the size of the font. This means only two lines of text are visible. Clearly someone did not put any thought into this.
7) On a mobile website, link to the full site at the TOP not bottom. Do not hide it, whatever you do. Conversely do the same on the regular site linking to mobile.
8) Bulletproof code. Yeah, I know. This isn’t a UI thing, but code quality obviously affects the UX. Mobile devices are already inherently more annoying to use than a real computer. The slightest inconvenience caused by a defect could infuriate the user. Oftentimes, a mobile app will be used under more stressful situations than a computer program which is likely to be used by someone at home or at least somewhere they can set up a laptop.
9) Test your app out in the worst circumstances. Fingers numb from the cold or from having sat on your hand, dazed having just been woken up out of stage 4 sleep by an alarm clock, driving down in heavy traffic (technically I can’t recommend that but let’s be real here), while intoxicated or stoned, or under heavy stress of any sort.
I know there are others but those are huge.
What is the best approach when contacting a designer to avoid a negative answer?
If you can’t afford a good designer, you can’t afford a good designer.
Most designers I know of have a chip on their shoulder about being asked to work for too cheap, or worse, free. It shows a great disrespect for them as a person and for the work that they do.
A common mantra is “Work for Full Price or Free, Never Cheap.” Working for full-price should be obvious. Working for free has its benefits, and many designers will work for free if the project seems worthy or at least really good for the designer’s professional growth. Working for cheap devalues the profession and undermines the process, the results, and other professionals.
If you are somehow charitable or working for a good cause, maybe you can woo a designer or firm to work for free. If not, pay full price. The only way to get cheap is by luck; you won’t likely woo a designer (or doctor, or lawyer, or any other professional) into accepting less money than they are worth. You may get lucky and find someone who doesn’t know better though. …or a designer who’s just not worth very much (but then, their work probably isn’t either).
I can say that I am not at all intrigued by a website that has taken ten months to produce no results, no investors, a low budget, and an unfinished product that I’m not allowed to know about. At the very least you have to tell people what you do, or intend to do.
What are the best resources available online for learning design thinking?
Design can only be learned by doing.
The Stanford d.school has a Virtual Crash Course at http://dschool.stanford.e
**
UPDATE 5/9/16: IDEO U has paid courses on ideou.com taught by some of their heavy hitters.
UPDATE 4/15: Coursera is currently running a class: “Design: Creation of Artifacts in Society” starting April 29, from Karl Ulrich at UPenn/Wharton. He’s also published a free e-book you can use with or without the course: http://ulrichbook.org
Also on Coursera: Human-Computer Interaction from Stanford’s Scott Klemmer, started March 31.The material is geared towards making user interfaces, but the design thinking process is simply a generalization of the design process, which Klemmer uses throughout in the context of UI. Recommended!
**
After every project, no matter how small, ask yourself: “How did the process work for me? Where do I feel confident? Weak? Excited? Anxious?” Then iterate and improve yourself. Don’t judge yourself too harshly. If you aren’t failing, you aren’t doing it right. But remember: design is supposed to be playful and fun.
After that, try using the d.school “mixtapes” (more in-depth) http://dschool.stanford.e
Then study the Bootcamp Bootleg: http://dschool.stanford.e
Find someone else interested in learning with you, and use something like Edistorm to brainstorm with them, and Evernote to keep track of your interview notes and design insights and ideas.
Finally, find someone who can mentor you online. I don’t know of a comprehensive course, so the best option is to get someone with experience to coach you through it. [I just started doing this for a friend.]
And then… do a few more design projects! Get involved with OpenIDEO. Make boring things fun. Think big and start small. And let us know how it goes!
Do spinner-based date pickers on iOS & Android detract from the user’s experience?
Generally speaking, the rule of thumb on mobile devices is to follow the platform conventions, and that native controls are almost always better than custom UIs. However, I’m at a loss as to whether the spinner-based date pi…
Do spinner-based date pickers on iOS & Android detract from the user’s experience?
Generally speaking, the rule of thumb on mobile devices is to follow the platform conventions, and that native controls are almost always better than custom UIs. However, I’m at a loss as to whether the spinner-based date pi…
Drawing users’ attention to unrecoverable actions?
We’re working on an internal business app, and throughout the process the users have been very involved in all aspects of the design. They have explained their workflow, terminology, etc. and the app models that as closely as possible, with their input at every step.
Most actions in the app can be undone, but there’s one action that (per the users’ instructions) can’t be undone without going into the database and manually changing data. In order to confirm this action, the user has to click “yes” on a modal alert. Alerts are used very rarely in the app; there’s only one other action that will bring about an alert. Neither action is performed very frequently.
However, the users are still somehow occasionally clicking on the wrong action and confirming their choice in the alert (presumably ignoring the text on it). What’s the best way to remedy this?
The text in the alert is a bit long, so we’re looking at making it shorter and more to the point, and maybe renaming the buttons so they aren’t just yes/no, but we don’t know if that’s enough. Is there some other way to draw the users’ attention and make them really realize what they’re doing? Are there proven ways to reduce errors like this?
Our ultimate solution:
For now, we’re focusing on changing the text and appearance of the alert dialog, as per Matt Lavoie’s and André’s answers. We made the text shorter and more to the point, added a caution icon and a clear statement that the action can’t be undone, and changed the buttons to say what they’ll do and not just yes/no.
We also changed the text on the button that launches the action to be red and in caps (all the other button texts are in black and just first letter capitalized).
Finally we made the entire background of the app go bright red when the alert dialog comes up. It’s quite jarring, so the users should definitely notice it.
We mentioned the changes we’re making to the users, and they were totally in favor of it. If these aren’t sufficient we’ll add additional input requirements to the alert, as in Andrew Leach’s and JeffH’s answers.