使いやすいフォームデザインのための新しい４つのルール
大規模なECサイトにおけるUXチームのリードであり、レンセラー工科大学でヒューマン・コンピューター・インタラクションの修士号を取得しています。Webサイト、Twitter。 私たちは日々、オンライン上でフォームを使っています。購入を完了するため、メーリングリストやソーシャルネットワークなどに登録するため、ディスカッションに参加するため、美味しそうなランチの写真を投稿するためなど、フォームを使う場面はさまざまです。オンラインで情報を入力するために、フォームは必要不可欠と言っても過言ではありません。 しかし、長きに渡ってフォームの改善はあまり見られませんでした。「使える」ものではあったものの、「使いやすい」ものには至らなかったのです。 近年では新しいテクニックを正しく使うことで、デザイナーはより早く、簡単で、生産性のあるフォームの作成が可能になっています。 フォームは短ければ良いのか 「フォー
日本製UIデザインツール「STUDIO」は従来のツールと何が違うのか - 酔いどれデザイン日誌 - Drunken Design Diary -
先日、私の古巣である株式会社オハコからスピンオフしたオハコプロダクツ社から、UIデザインツール「 STUDIO」のクローズドβ版がリリースされました。 国産のUIデザインツールといえばグッドパッチ社が提供するProttなどが有名ですが、β版を触ってみた感想と合わせて STUDIOの何がすごいのか？従来のUIデザインツールとは何が違うのか？ということを紹介してみたいと思います。 目次 これはプロトタイピングツールではない 特筆すべきはシームレスな操作感 全員がMVPまで作れる時代 まとめ これはプロトタイピングツールではない まず、最初にSTUDIOを「UIプロトタイピングツール」ではなく「UIデザインツール」と記載したのには訳があります。近年はプロトタイピングの重要性が多方面で説かれているのに呼応するように、冒頭で紹介したProttをはじめ国内外からたくさんのプロトタイピングツールが登場し
STUDIO | The next generation design tool for digital products
Build your idea.The next generation design tool for digital products. Sign up for free Designing intuitivelyBuild your idea into a product. Design and programming skills are no longer necessary to create a product. With this one tool kit STUDIO, you can make your idea into a real product regardless of your skill knowledge. Complete a layout with simple drags and drops by adding the elements you wa
アプリのUIデザイナーとして働き始める時に覚えておくと便利な用語（基本編） | DevelopersIO
こんにちは。2016年もあと3週間を切り、迫る年の瀬にしんみりとしている宮嶋です。 クリスマス？知らない子ですね……。 はじめに 私がUIデザイナーになって5ヶ月、iOSとAndroidどちらの作業をしていてもよく出てきた用語の中でも 覚えておくと周りとの認識の共有がスムーズになるかな？と思うことについて書いていきます。 用語集 UI ユーザーインターフェース（User Interface） 機器やシステムと利用者間で情報をやり取りするための仕組み。 ここではよくアプリやWEBの画面構成として使われている……ような気がします。 UX ユーザーエクスペリエンス（User Experience） ユーザー体験とも言います。システムやサービスを利用したことにより、利用者が受ける影響を 動作や感情、知覚など様々な面から予期したものであったり、実際に利用者が体験したことであったり、定義が広いです。
ユーザーが理解しやすいアイコンにするための６つのルール
人間とコンピュータとのやり取りにおいて、アイコンはテキストにはない長所がいくつかあります。 シンプルで分かりやすくフレンドリー。長い文章と置き換えることができる。 画面の中で場所を取らず、特に小さいスクリーンほど使い勝手がよい。 視覚的に楽しみがあり、デザインの芸術性を高めることができる。 一番重要なポイントとして、ほとんどのアプリがアイコンを用いており、ユーザーにとって親近感のあるデザインパターンである。 これらの潜在的な長所がある一方で、アイコンはその潜在的な短所を考慮せずにデザインされると、ユーサビリティ面での問題を引き起こします。 この記事では、UIの点からアイコンに関連した多くの問題を要約して解説し、これらの問題に対する対処法を述べていきたいと思います。 １．アイコンは意味を伝えるもの 理解しにくいアイコンが、伝えるべき機能を分かりにくくしてしまうことがあります。アイコンは意味を
みんなで理想を共有！ "動く"プロトタイプを導入しました。 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。サイボウズ デザイングループの樋田（といだ）です。 今年の6月にデザイナーとしてサイボウズへ中途入社しました。 今は社内でプロトタイピングおじさんやってます。 プロトタイピングってもう開発のプロセスには欠かせないものになってますよね。 サイボウズの開発でもいままでプロトタイピングをやってきたのですが、プロトタイピングをより開発に活かすべく新しいツールを導入することにしました。 理想のツールを探して これまではInVIsionだけでプロトタイプを作っていたのですが、InVisionのプロトタイプだけでは実装とのずれがあって詳細な検討ができない…という不満がありました。 そこで実装に近い"動く"プロトタイプが作れるツールを導入することにしました。 主な目的はこの3点 早く出来る 簡単にできる（学習コストが低い） 再現度が高い 世の中にはたくさんのプロトタイピングツールがあるので 理
もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo
ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
Weex
Lightweight low footprint，simple syntax，and easy to use Help you build real Native App Different from "web app" , "HTML5 app" and "hybrid app", you can use Weex to build a real mobile app. More intimate is that you write the code is relatively simple, just use HTML, CSS, Javascript can build native applications.But in fact, the bottom of the application is Objective-C or Java. At the same time, We
コンバージョン率を改善する入力フォームにおける10のルール
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 Webやアプリ内のフォームは、ユーザーとの最も大切なやり取りの場の一つです。サービスへの登録や予約、フィードバック、決済処理など、ユーザーと企業間の取引を開始したり、ユーザーいにあらゆる情報を入力してもらうべく、様々なところで使われています。 ユーザーがいかに素早く正確に情報を入力し、求める情報を最後まで入力してくれるかはこのフォームの出来にかかっています。 この記事ではフォームのデザインにおいて、様々なテストやユーザーの声などから導き出された、実用的な施策を紹介します。 1. フォームは論理的に並べる フォームは対話そのものです。従って、普通の会話の様に、ユーザーとアプリの２者間でのコミュニケーションとして表現されるべきでしょう。 質問は直感的な順番にする。ユ
「シズル感」と「読みやすさ」ってどうやってデザインで解決する？お菓子専門Webメディアのリニューアルで使った手法 | THE BAKE MAGAZINE
「シズル感」と「読みやすさ」ってどうやってデザインで解決する？お菓子専門ウェブメディアのリニューアルで使った手法 こんにちは、BAKEのデザイナー井手口です。 前職では、グラフィックとウェブデザインの両方を経験できる制作会社に所属していましたが、以前から興味があったブランディングデザインを行いたく、今年の4月からBAKEではたらいています。 BAKEに入ってからは、店舗ブランドで使っている原材料のオリジナルブランド「011」のパッケージ開発や、店舗ブランドのイベント用LP作成やPOPなどのデザインを行いながら、同時進行で進めていたお菓子専門のウェブメディア『CAKE.TOKYO』を8月上旬にフルリニューアルしました。 リニューアルの経緯はCAKE.TOKYOのこちらの記事で書いたので、今回は、サイトのデザインについてデザイナー目線から説明しようと思います。 → CAKE.TOKYO 雑誌の
使いやすいだけではユーザー体験が上げられないサービスでの、デザイン手法。
Transcript 12:30 Copyright ©DeNA Co.,Ltd. All rights reserved. 闌怴ة؎زٕ Title DeNA Co.,Ltd. Designer Masanori Miyamoto 2016.7.23 @Kanazawa ⢪ְװְֽׅדכ ِ٦ؠ٦⡤꿀ָ♳־זְ ؟٦ؽأדךծرؠ؎ٝ䩛岀կ 12:30 Copyright ©DeNA Co.,Ltd. All rights reserved. כׄח תַׁך .BUFSJBM�%FTJHOأة؎ٕד فٖئׇׁٝגְֹתׅկ� ֹהֿך䩛岀כػؙ Introduction 12:30 Copyright ©DeNA Co.,Ltd. All rights reserved. فٗؿ؍٦ٕ 㹧劤僅Ⱙ Profile Designer 2006 2012 2016
ユーザ・インターフェースのためのイージングカーブをつくる | POSTD
フラットデザインの導入以来、アニメーションの質が、今までにないほど、優れたインターフェース作成のために必要不可欠なものとなっています。モーションデザインを通して、製品の総体的なブランドエクスペリエンスを左右するようになり、製品を、市場の他のものと差別化する要素となりました。アニメーションは複雑なインタラクションを簡素化し、優れたデザインを記憶に残るユーザエクスペリエンスにしました。では、質の高いアニメーションはどのように作られるのでしょうか？ イージングカーブは多くの要となるコンポーネントの1つで、適切なアニメーションをとり、素晴らしいものに作り上げます。 問題なのは、イージングカーブがどのように機能するかについての理解が、少々難しいということです。 前回の記事 After Effects to CSS で触れたタイミング関数への興味の派生としてこの記事を書きましたが、この記事を読むことで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Refactoring UI Launch Details
Element
Lonely Planet Travel Guides and Travel Information
Material UIを使ってカッコいいUIのReactアプリケーションを作ってみた
Arts & Culture Experiments | Experiments with Google
Styleguide — Marvel
LPや料金ページ、商品紹介ページ等のUIを中心に収集しているWebデザインギャラリー・「UI Temple」
