Why You Only Need to Test with 5 Users
Summary: Elaborate usability tests are a waste of resources. The best results come from testing no more than 5 users and running as many small tests as you can afford. Introduction Some people think that usability is very costly and complex and that user tests should be reserved for the rare web design project with a huge budget and a lavish time schedule. Not true. Elaborate usability tests are a
Form Validation UX in HTML and CSS | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. You can do an impressive amount of form validation with just HTML attributes. You can make the user experience pretty clean and clear with CSS selectors. But it does require some CSS trickery to get everything just right! (You can) make the label look like a placeholder Firs
jQuery Autotab Demo
Autotab's full documentation can be found in ReadMe.md on GitHub. Angular and Knockout demos are also available. Note: For the purposes of this demo, I am calling $.autotab({ tabOnSelect: true }); to initialize the auto tabbing order. Use the buttons below to turn Autotab on or off. Turning Autotab off will remove both auto tabbing and filtering. Turn On Turn Off Autotab status: On
Apple on Hamburger Menus
Mike Stern, Apple User Experience Evangelist in Designing Intuitive User Experiences - 211 WWDC 2014 session (at 31’ 57"): But I feel like I would be remiss If I didn’t use this opportunity to talk with you about hamburger menus. AKA Slide out menus, AKA sidebars, AKA basements, AKA drawers. Now, these controls are very common on iOS, and on other platforms. And I’m sure many of you here work on a
画像重視のデザイン：大きければいいのか
大きな画像には視覚に訴える力がある。しかし、その優先順位づけを誤ると、全体のユーザーエクスペリエンスにとっては害になりうる。 Image-Focused Design: Is Bigger Better? by Kathryn Whitenton on September 28, 2014 日本語版2014年10月20日公開 百聞は一見にしかず、と言うように、人は視覚的な生き物である。ユーザーの関心を引き、自分たちのメッセージを伝えるのに、画像は効果的な手段だ。ネットワークやデバイスによってより大きな画像が表示可能になるにしたがい、目をひく、巨大な画像を組み込むWebサイトは増えるばかりだ。そうしたサイトでは画像を1枚だけ選択することができず、カルーセルで数枚の画像を表示していることも多い。 Southwest Airlinesの新しいトップページはこのトレンドのいい例である。ページで最も
直感的なUIとは予想した通りの結果が得られるもののこと - ネコメシCEOブログ
UIデザインの参考に！斬新で美しいUIをもったiPhoneアプリまとめ という記事では、紹介しているアプリのことごとくに、「ボタンが無くてシンプル」「直感的で使いやすい」などと書いてあるが、ClearのUIみたいなのを「誰でも直感的に操作できる」などと評価する理由がさっぱり理解できない。 こういうUIは基本的にどれも玄人向けで、操作がジェスチャの塊になってしまっているものは、それが使いこなせる俺カッケー感が高くて自己顕示欲を満たしやすい。"そのように操作できるUIデザイン"が気持ちいいのではなく、"そのように操作している自分"が気持ちいいの間違いなんじゃないだろうか。 ボタンが一切なくてシンプルだと気持ちがいいUIになるだって？ そんなわけがあるはずない。現実世界はボタンが一切なくてシンプルなUIで溢れているし、そのおかげで毎日いろんな場面でいらいらさせられている。たかが1個のレバーを上げ
Aerotwist - Better password form fields
The best experiences are all about reducing friction, and that takes many forms. Sometimes it means adding things in, like labels, tooltips or other signifiers. At other times it’s about stripping things back to the core, making it super clear what you’re supposed to do next. Last updated: 29 Apr 2014 Est. Read Time: 3 min Share this: Twitter Tagged: #design, #opinion Update (1st May 2014, pre caf
Webデザインの慣習を破ることは、ユーザーエクスペリエンスを破壊すること
Bucknell Universityのサイトの、型破りなレスポンシブデザインへの変更は話題を呼んだが、それによってユーザビリティがかなり犠牲になっていることが、学生と保護者によるテストで明らかになった。 Breaking Web Design Conventions = Breaking the User Experience by Katie Sherwin on July 20, 2014 日本語版2014年10月6日公開 大学のWebサイトのトップページを頭に思い浮かべてほしいと言われたら、どのようなイメージが浮かぶだろうか。浮かぶのはSUNY Cortlandのトップページのようなもの、つまり、芝生の上に学生がいる画像があって、ページの上部にはナビゲーションがあり、そこにAcademics（：学部・大学院）、Admissions（：入学案内）、Prospective Studen
Punkchip | Accessible HTML video as a background
Today I got a comment on Autoplay is bad for all users which asked: So why does this high-traffic site designed by a former top-Google UX designer use it? The comment has linked to a page which has video as a background element playing underneath the introduction text and call to action button, the images are moving but there is no sound on page load. At times this apparently important information
Using the CSS :target Selector | CSS-Tricks
The CSS :target pseudo-selector in CSS matches when the hash in the URL and the id of an element are the same. The current hash of the URL is “voters” <section id="voters"> Content </section> :target { background: yellow; } While that URL is as it is, that section element will have a yellow background, as per our CSS. When would you use this? One possibility is when you want style with “states.” W
Using the tabindex attribute - TPGi
The HTML tabindex attribute is used to manage keyboard focus. Used wisely, it can effectively handle focus within web widgets. Used unwisely however, the tabindex attribute can destroy the usability of web content for keyboard users. The tabindex attribute indicates that an element can be focused on, and determines how that focus is handled. It takes an integer (whole number) as a value, and the r
Wanted: Your 404 Error Pages | Design Showcase | Smashing Magazine
If the 404 doesn’t help your visitors, then what’s the point of having carefully crafted memes, funny GIFs, or odd interactive games? A visitor could find themselves on a 404 page for one of many reasons: a mistyped address, a bad link from somewhere else, a deleted page or content that has moved elsewhere. While you can prevent errors from moved pages with redirects, you can’t control people’s mi
Future-Ready Content
The future is flexible, and we’re bending with it. From responsive web design to futurefriend.ly thinking, we’re moving quickly toward a web that’s more fluid, less fixed, and more easily accessed on a multitude of devices. As we embrace this shift, we need to relinquish control of our content as well, setting it free from the boundaries of a traditional webpage to flow as needed through varied di
How to Craft the Perfect 404 Page — SitePoint
Chances are, if you’ve never hit a 404 page, you’ve probably never used the internet. The concept is simple: If a client computer requests a URL that the server can’t resolve, the server responds with the ‘404 Not Found’ response – or in other words “Yes, I’m here, but I can’t find the item you requested”. While the 404 was born as a simple necessity of the HTTP protocol, a lot of user experience
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nibbler - Test any website
https://jackocnr.com/intl-tel-input.html
How To Make Modal Windows Better For Everyone — Smashing Magazine
Efficiently Simplifying Navigation, Part 3: Interaction Design — Smashing Magazine
Four Design Lessons from Material Design Documentation