Form design best practices by Andrew Coyle
These best practices serve to provide a shorthand when designing forms. Make sure to always keep in mind your context to determine the best presentation. Like most things in design, there are often exceptions to best practices. Use a labelLabels are imperative for accessibility. Screen readers communicate each label to users. Without proper labeling, forms are inaccessible to many people. Make sur
ソシオメディア | OOUI ã®ç›®å½“ã¦
OOUI ã®ç›®å½“ã¦ã«ã¤ã„ã¦è€ƒãˆãŸã„ã¨æ€ã„ã¾ã™ã€‚ ç§ã¯ã“ã“ã§ã€Œç›®å½“ã¦ã€ã¨ã„ã†è¨€è‘‰ã‚’「オブジェクトã€ã®è¨³èªžã¨ã—ã¦ä½¿ã£ã¦ã„ã¾ã™ã€‚ã“ã®ã‚¿ã‚¤ãƒˆãƒ«è‡ªä½“ã«åŒèªžå復的ãªéŸ¿ãã‚’æŒãŸã›ã¦ã¿ãŸã®ã§ã™ã€‚ OOUI ã¯ã€Œã‚ªãƒ–ジェクト指å‘ユーザーインターフェースã€ã®ã“ã¨ã§ã™ã‹ã‚‰ã€OOUI ã«ã¤ã„ã¦è€ƒãˆã‚‹ä¸Šã§ã¯ã‚ªãƒ–ジェクト指å‘ã¨ã¯ä½•ã‹ã¨ã„ã†ã“ã¨ã«ã¤ã„ã¦è€ƒãˆã‚‹å¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚ã™ã‚‹ã¨ã•ã‚‰ã«ã‚ªãƒ–ジェクトã¨ã¯ä½•ã‹ã¨ã„ã†ã¨ã“ã‚ã¾ã§é¡ã£ã¦ã€ã“ã®ã‚³ãƒ³ã‚»ãƒ—トã®æœ¬è³ªã‚’見ã¦ã„ãå¿…è¦ãŒã‚ã‚‹ã®ã§ã™ã€‚ ãã“ã§ã€O（object）ã€O（oriented）ã€OO（object-oriented）ã€U（user）ã€I（interface）ã€UI（user interface）ã€OOUI（object-oriented user interface）ã¨ã„ã†é¢¨ã«è¨€è‘‰ã‚’分解ã—ã¦ã€ãã‚Œãžã‚Œã®æ„味を確èªã—ãªãŒã‚‰ã€OOUI ã®ç›®å½“ã¦ã‚’探ã£ã¦ã„ãã¾ã™ã€‚ オブジェク
モãƒã‚¤ãƒ«ã‚µã‚¤ãƒˆã®ã‚µãƒ–ナビゲーション
モãƒã‚¤ãƒ«ã‚µã‚¤ãƒˆã®ã‚µãƒ–ナビゲーションã®ä¸»ãªå®Ÿè£…方法ã¨ã—ã¦ã¯ã€ã‚¢ã‚³ãƒ¼ãƒ‡ã‚£ã‚ªãƒ³ã‚„シーケンシャルメニューã€ã‚»ã‚¯ã‚·ãƒ§ãƒ³ãƒ¡ãƒ‹ãƒ¥ãƒ¼ã€ã‚«ãƒ†ã‚´ãƒªãƒ¼ãƒ©ãƒ³ãƒ‡ã‚£ãƒ³ã‚°ãƒšãƒ¼ã‚¸ãŒæŒ™ã’られる。ã“ã®ã†ã¡ã®ã©ã‚ŒãŒãã®ã‚µã‚¤ãƒˆã«æœ€é©ãªã®ã‹ã¯ã€IAã«ã‚る下ä½ã‚«ãƒ†ã‚´ãƒªãƒ¼ã®æ•°ã‚„サイトã§ã®ãƒ¦ãƒ¼ã‚¶ãƒ¼ã®ç§»å‹•ãƒ‘ターンã«ã‚ˆã£ã¦æ±ºå®šã•ã‚Œã‚‹ã€‚ Mobile Subnavigation by Raluca Budiu on July 16, 2017 日本語版2017å¹´11月16日公開 æƒ…å ±ã‚¢ãƒ¼ã‚テクãƒãƒ£ãŒã‹ãªã‚Šè¤‡é›‘ã§ã€ã‚«ãƒ†ã‚´ãƒªãƒ¼ã®éšŽå±¤ãŒå¤šæ•°ã‚ã‚‹Webサイトã¯å¤šã„。下ä½ã®ã‚«ãƒ†ã‚´ãƒªãƒ¼ã¯ã€ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—ãªã‚‰ã€ãƒ‰ãƒãƒƒãƒ—ダウンメニューやメガメニューã®ä¸ã«ã‚ã‚‹ã“ã¨ãŒå¤šã„ãŒã€ã“ã†ã—ãŸã‚µãƒ–カテゴリーをモãƒã‚¤ãƒ«ãƒ‡ãƒã‚¤ã‚¹ã§è¡¨ç¤ºã™ã‚‹ã®ã¯å¿…ãšã—も容易ã§ã¯ãªã„。 Cisco.com：デスクトップサイトã§ã¯ã€æ°´å¹³ãƒŠãƒ“ゲーションãƒãƒ¼ã‚’利用ã—ã¦ã€ãƒ¡ã‚¤ãƒ³ã‚«ãƒ†ã‚´ãƒªãƒ¼ã‚’åŽã‚ã¦ã„る。マウス
Hamburger menu alternatives for mobile navigation
If you’re working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its low discoverability and efficiency. (You can read some of best articles on the topic here, here, here, and here.) Luckily, more and more sites and apps are experimenting with alternative, more efficient solutions for th
Appleã€Googleã€Amazonã®ã€Œå¤±æ•—ã€ã«å¦ã¶ã€ãƒ•ã‚©ãƒ¼ãƒ 改善3ã¤ã®ãƒ’ント
WebデザインやUXデザインã®è©±é¡Œã§ã¯ã€ã‚¢ãƒƒãƒ—ルやグーグルã€ã‚¢ãƒžã‚¾ãƒ³ãŒå¤§äººæ°—。ã§ã‚‚ã€ãƒ“ジãƒã‚¹ãŒæˆåŠŸã—ã¦ã„ã‚‹ã‹ã‚‰ã¨ã„ã£ã¦ã€å¸¸ã«ãƒ‡ã‚¶ã‚¤ãƒ³ãŒæ£ã—ã„ã¨ã¯é™ã‚Šã¾ã›ã‚“。フォームã«ãŠã‘ã‚‹å•é¡Œç‚¹ã¨æ”¹å–„案を具体的ã«ç¤ºã—ã¾ã™ã€‚ ã“ã‚Œã¾ã§ã«ã€Œã‚¢ãƒƒãƒ—ルã®ã‚ˆã†ã«ç¾Žã—ãã€ã€Œã‚°ãƒ¼ã‚°ãƒ«ã®ã‚ˆã†ã«ã‚·ãƒ³ãƒ—ルã«ã€ã€Œã‚¢ãƒžã‚¾ãƒ³ã®ã‚ˆã†ã«åˆ†ã‹ã‚Šã‚„ã™ãã€ãƒ‡ã‚¶ã‚¤ãƒ³ã—ã¦ã»ã—ã„ã€ã¨è¨€ã‚ã‚ŒãŸçµŒé¨“ãŒã‚ã‚‹ã§ã—ょã†ã‹ï¼Ÿ 優れãŸæŠ€è¡“ã§æœ‰åãªä¼æ¥ã¯ã‚¯ãƒ©ã‚¤ã‚¢ãƒ³ãƒˆã‹ã‚‰ã€Œã‚´ãƒ¼ãƒ«ã€ã¨ã¿ãªã•ã‚Œã€å¤šãã®å ´åˆãã“ã‹ã‚‰å¦ã¹ã¾ã™ã€‚ ã¨ã¯ã„ãˆãƒ•ã‚©ãƒ¼ãƒ ã®ã“ã¨ã¨ãªã‚‹ã¨ã€Œãƒ‡ã‚¸ã‚¿ãƒ«ã®å·¨äººãŸã¡ã€ã«ã•ãˆæ”¹å–„ãŒå¿…è¦ãªç‚¹ãŒã‚ã‚Šã¾ã™ã€‚ アップルã¨ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティ クライアントã¯ã—ã°ã—ã°æœ€åˆã«ã‚¢ãƒƒãƒ—ルを引ãåˆã„ã«å‡ºã™ã®ã§ã€ã“ã“ã§ã‚‚ãã†ã—ã¾ã™ã€‚アップルã¯ãƒ•ã‚©ãƒ¼ãƒ ã‚’å«ã‚ã€ãƒ¢ãƒ€ãƒ³ãƒŸãƒ‹ãƒžãƒªã‚¹ãƒˆï¼ˆãƒ•ãƒ©ãƒƒãƒˆï¼‰ãƒ‡ã‚¶ã‚¤ãƒ³ã®ã‚¤ãƒ³ã‚¿ãƒ¼ãƒ•ã‚§ã‚¤ã‚¹ã‚’æä¾›ã—ã¦ã„ã¾ã™ã€‚図1ã«ä¾‹ã‚’示ã—ã¾ã™ã€‚ å•é¡Œã¯ãƒ•ã‚©ãƒ¼ãƒ ãŒã¨ãã©ã「ミニマリ
Why mobile first is outdated
For a number of years now, we’ve been hit over the head time and again with “mobile first†and “mobile onlyâ€. Those of us building software since before the iPhone have hacked our brains, our processes, our companies, to ensure we start thinking “mobile first†rather than web first. There are books, courses, and conferences about being “mobile firstâ€. But if “mobile†is our future, why are almost
è¨è¨ˆå“質ã¨åˆ©ç”¨å“質（後編）
ユーザビリティã¨UXã®é–¢ä¿‚ã‹ã‚‰å§‹ã¾ã‚Šã€æº€è¶³æ„Ÿã®ä½ç½®ã¥ã‘ã€åˆ©ç”¨å“質ã¨ã„ã†æ¦‚念ã€æ„Ÿæ€§çš„é…力ãªã©ã€ã•ã¾ã–ã¾ãªæ¦‚念ãŒã€ã“ã®å›³ã«ã‚ˆã£ã¦ã€ãれらãŒã»ã¼æ‰€å®šã®ä½ç½®ã«åŽã¾ã£ãŸã¨è€ƒãˆã¦ã„る。ãŠã¾ã‘çš„ã«UI/UXã«ã¤ã„ã¦ã‚‚æ•´ç†ãŒã¤ã„ã¦ã‹ãªã‚Šæ°—分的ã«ã¯ã™ã£ãã‚Šã—ãŸã€‚ é»’é ˆå誉教授 2015å¹´10月5æ—¥ （「è¨è¨ˆå“質ã¨åˆ©ç”¨å“質（å‰ç·¨ï¼‰ã€ã‹ã‚‰ã®ã¤ã¥ã） 客観的è¨è¨ˆå“質 ã¾ãšå®¢è¦³çš„è¨è¨ˆå“質ã‹ã‚‰èª¬æ˜Žã™ã‚‹ã¨ã€ãã®å¤§åŠã¯å¾“æ¥ã®ã‚‚ã®ã¨å¤‰ã‚ã£ã¦ã„ãªã„ãŒã€æœ€åˆã®å¤‰æ›´ç‚¹ã¯ã€ãƒ¦ãƒ¼ã‚¶ãƒ“リティã«ä½¿ã„ã‚„ã™ã•ã¨ã„ã†å‰¯é¡Œã‚’付ã‘ãŸç‚¹ã§ã‚る。ã“ã‚Œã¯ã€åƒ•ãŒã€è¨è¨ˆå“質ã«å«ã¾ã‚Œã¦ã„ã‚‹ã‚‚ã®ã®å¤§åŠã«ã¯-abilityã¨ã„ã†èªžå°¾ãŒã¤ã„ã¦ã„ã¦ã€ãã‚Œã¯abilityã§ã‚ã‚Špotentialã§ã‚ã‚‹ã“ã¨ã‚’ã‚らã‚ã—ã¦ã„ã¦ã€åˆ©ç”¨ã—ãŸçµæžœã§ã¯ãªã„ã¨ã„ã†ã“ã¨ã‚’力説ã—ãŸã®ã ãŒã€Nigel BevanãŒãªãœã‹ãƒ¦ãƒ¼ã‚¶ãƒ“リティã®ä»£ã‚ã‚Šã«ease of useã¨ã„ã†è¨€ã„æ–¹ãŒã„ã„ã¨ä¸»å¼µ
Why Infield Top Aligned Form Labels Are Quickest to Scan
How easy is it for users to scan your form? If your form is hard to scan, it could take longer than expected for users to complete it. This leads to form abandonment and loss of potential sign ups. The way to avoid this is to make your fields quick to scan when users first see them and after they fill them out. Scanning Pre-fill & Post-fillWhen users first see a form, they scan it to size up the a
1
メンテナンス
ランã‚ング
ãŠçŸ¥ã‚‰ã›
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}