エンジニアのためのUIデザインエンジニアでも使えるデザインの理論とテクニック
画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ
2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか？ この画面遷移図というものは本来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、本来で
uilang
a minimal, ui-focused programming language for web designers clicking on ".try-it" toggles class "hidden" on ".info-box" Try It Getting Started Insert uilang.js in your page, write some uilang as shown above in a simple <code> element and use CSS to show, hide and animate things. Download 1KB Build Interfaces Create popovers, tabs, galleries, overlays and more using a language specifically designe
モバイル向けUI/UXデザイン10のポイント デザイン会社 ビートラックス: ブログ
日々めまぐるしく変化するモバイルマーケットにおいて、マートフォンアプリやモバイルWebのUIやUXを最適にデザインする事はそのプロダクトがヒットするかの大きな要素となっている。特に最近は見た目が良いだけではなく操作性が非常に高いモバイルサービスが次々とリリースされユーザーが求めるクオリティレベルも上がっている。 小さな画面サイズ、様々な利用シーン、複雑な仕様の機能を実装したモバイルサービスにおいては、高いユーザビリティを実現する事が何よりも重要である。よりユーザーに愛される為もポイントをまとめてみた。 1. レイヤースタイルのUIで奥行きを出す モバイルのインターフェイスに関しては、最近のトレンドを見てみると、フラットなUIがトレンドのように思えるが、実はモバイルの限られたスペースでユーザーに効果的なエクスペリエンスを提供するには、縦と横のスペースに加え、”深さ”を利用したレイヤースタイル
Morphing Buttons Concept | Codrops
Some inspiration for a morphing button concept where the action element (button) morphs into a component. The examples show different types of components, i.e. fullscreen overlay, modal window, sidebar and more. Today we want to share a bit of inspiration for a morphing button concept. You have surely come across this concept already: the idea is to use an element of action, like a button, and mor
Ladda for Bootstrap 3 UI
Usage: Include the CSS and Javascript for Spin.js and Ladda effect: <link rel="stylesheet" href="dist/ladda-themeless.min.css"> <script src="dist/spin.min.js"></script> <script src="dist/ladda.min.js"></script> Then to produce a button with the Ladda effect: <button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button> Or using "a" tag:
優れたユーザーインタフェース（UI）を実現するチェックリスト36項目
【img via tabletop assistant by MattHurst】 優れたユーザーインタフェースとは何か。どのようなデザインを「優れたユーザーインタフェース」と呼ぶのに相応しいのだろうか。 GoodUIというサイトに優れたユーザーインタフェースを実現するために確認しておきたい36項目をイラスト付きで解説していた。とても分かりやすく納得できる内容が多かったので、紹介しておく！ 1.マルチカラムではなく、シングルカラム 複数カラムだとユーザーの目線が左右に逸れてしまう可能性があるため。 2.まずはギフトを渡してみる 最初から買うことを促すよりもまずはこちらから何かを与えることによってユーザーに喜ばれる。 3.似た機能や項目は1つにまとめて表示する 似た機能を分散させる必要はない。 4.ユーザーからの反応を載せる 実際に使っている「ユーザーの声」を参考に買い物をする人は少なくない
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
TechCrunch • Startup and Technology News
African fintech Chipper Cash saw its valuation slashed from $2 billion to $1.25 billion before FTX’s bankruptcy, according to documents shared by the Financial Times on Alameda’s venture c Google is making it easier for users to search for tabs, bookmarks, and history from the address bar with new shortcuts. You can now type @tabs, @bookmarks, or @history to begin searching for websites
Tuneup JS+Travis CIによるiPhoneアプリ自動UIテストまとめ - 5.1さらうどん
最近、iPhoneアプリの開発に自動UIテストを取り入れてみたので、手に入れた知見を共有してみたいと思います。 この記事について iOSアプリケーションの自動UIテストを行うためのノウハウについて解説します。 この記事におけるUI自動テストとはiOSシミュレーターや実機を自動で起動し、予め記述していたとおりに操作させ、アプリケーションが問題なく動いているかどうかをテストする手法のことです。 今回はTuneup JSと呼ばれるライブラリを用いて、アプリの自動再生、要素のチェック、画像比較によるテストを行い、最終的にTravis CI上で動かすところまでを書いています。 iOS開発の知識のほか、JavaScript, Rubyを知っていると良いかも知れません。 ここで紹介するもののいくつかはRuby製であり、RubyGems, Bundler, Rakeなど、最低限のユーティリティが動く・使え
すてきな入力フォームを作るために調べてみたこと - console.blog(self);
入力フォームって、基本的に忌み嫌われるもの。項目がたくさんあると、そっとタブを閉じたくなる。 旅行に行くときに、いろいろな旅行会社の入力フォームを見たけど、あまり使いやすくなかった。というか、見た瞬間に入力する気が失せてしまうような入力フォームが多かった。 入力フォームの多いページに関わることがあるので、入力フォームに関する資料をいろいろ読んだ。タブを閉じられないように、使いやすい入力フォームを考えたい。 入力フォームについて読んだもの 参考になったのはこれらの資料。どの資料も新しいものではないけど、参考になることはたくさんあった。 僕は英語が苦手で、そんな僕が読んだ感想を書くので間違いがあるかも。間違っていたら教えてください。詳細は原文を読んでください。 RIAC：RIAコンソーシアムユーザビリティガイドライン LukeW | Web Form Design Best Practices
プログラマのためのカラーパレットツールを作りました - shoya.io
Paletta - HSV Color palette for every Programmer 背景 フラットデザインの台頭によって、昨今のアプリ/サービス開発において「色選び」が重要視されています。例えば上の写真は次のトイレの時刻を機械学習で予測するRestCastというアプリですが、「いい感じの青」を基調としたタイルを敷くことで、トイレというワードをニオワセないデザインに仕上がるよう心がけてつくりました。 デザイナー/プログラマーの皆さんは普段どうやって色を選んでいるのでしょうか。多くの場合、既存のカラーパレットをぽちぽち選択したり、#123456のようなカラーコードを調整するのではないかと思います。実は、この方法で「いい感じの色」を選ぶのは難しいのです。その理由を色の表現方法を踏まえて説明します。 混色系と顕色系 色を数値で表現する方法を表色系といいます。オストワルト表色系やマンセ
データバインディングによるインタラクティブなUIの効率的な表現
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
Ladda
A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing. For a real-world example, check out any of the forms on slides.com. expand-left Submit expand-right Submit expand-up Submit expand-down Submit contract Submit co
New JavaScript UI Library
I have been using it quite substantially for a number of different projects now and must say that I absolutely love the way it works. - Soteri Panagou I've been using your grid on a couple of small projects and I've got to say it's an awesome piece of work. It's very easy to configure and offers a lot of features while staying really responsive. As a programmer it inspires me to write better code.
iPhoneはなぜ気持ちがよいのか？ (1/5) | Telescope Magazine
近年「気持ちよいインタフェースをつくりたい」という要求や、「気持ちよいインターフェースとは何か？」その理由説明が求められてきている。ネット上では、ある製品が出ると、製品のインターフェースやさわり心地を、サクサク感とか、もっさり感、ヌルヌル感と表現する人たちがいる。これは、「気持ちよさ」への注目が高まっていることの表れであるが、実際それが何であるのか、その原理は解明されていない。 今回の記事では、そういった「気持ちよさ」がどこからやってくるのか、道具の透明性・身体性をキーワードに、ものづくりやデザインに必要なこれからの発想を探っていこう。 道具の透明性からはじまるヒューマンインタフェース研究 道具は「透明性」が重要であると言われている。人がある道具を利用しているときに、その道具自体をなるべく意識させず目的に集中できるようにするためだ。例えば、スコップやハンマー、身近なところでは、ハサミやペン
Microsoft Word - RoboMec2008.doc
触感覚有無が自他帰属性に与える影響に関する研究 Study of Effect That Haptic Sensibility Give to the Attribution of Own Actions to Self or Others ○ 村林 正堂 (東大) 池本 有助 (東大) 正 大武 美保子 (東大) 前田 貴記 (慶應大) 加藤 元一郎 (慶應大) 正 淺間 一 (東大) Masataka MURABAYASHI, the University of Tokyo, masataka@race.u-tokyo.ac.jp Yusuke IKEMOTO, the University of Tokyo Mihoko OTAKE, the University of Tokyo Takaki MAEDA, Keio University Motoichiro KATO, Keio
VisualHaptics: カーソルによる手触り感提示システム
身体とは何か。 GUI 環境においてカーソルは多くの操作に関わる重要な要素であるが，操作する際にユーザはあまり意識することがない．また，カーソルは基本的に大きく変化することはあまりなかった．VisualHaptics は，実世界において人間の手と対象の相補的な関係に着目し，カーソルで触れる対象の状態に応じてカーソルの動きや変形を利用することで，カーソルからも対象の状態についての情報提示を行う．これにより，ユーザが実際に触っているような感覚を再現することが可能となる． デモ：Unity によるデモの再開発しました。以下の画像クリックで新サイトへ飛びます 発表 Keita Watanabe, Michiaki Yasumura. VisualHaptics: Generating Haptic Sensation Using Only Visual Cues, ACE2008, Proceed
【インタビュー】クックパッドのUIデザイナー：「エンジニアの仕事が０を１にする仕事なら、デザインは1を100にする仕事 」 | Startup Dating
Startup Datingでインタビュー連載を始めてみることになりました。さて連載の初回は、2011年に新卒としてクックパッドに入社し、現在UIデザイナーとして活躍する片山育美さん（@monja415）。片山さんが現職に就くまでの道のりや、クックパッドのUIに関する考え方、片山さんが手がけた具体的なUI改善の事例やヒントなどをたっぷりお伝えします。 美術大学で勉強、もともと職人になりたかった もともと絵を描くのが好きだし得意、高校のときから職人になりたいと思っていたと話す片山さん。美術大学に進学し、ファイン系とデザイン系でデザイン系を学ぶことを選択。ファイン系とは、絵画や彫刻などいかにも“アート”というもの。ファイン系が芸術だから、どこか自分の中で完結してしまうところがある。でも、職人って誰かのために技術を使える人なんじゃないか、と。情報デザイン学科を専攻し、サービスデザインやUXと言わ
Open-sourcing Stylo
May 22, 2012 Open-sourcing Stylo I learn by setting projects for myself, and so a few months ago I decided to create an app called Stylo. The idea was to let people design basic web apps using a Fireworks-like interface, ultimately exporting the finished design as CSS. I’d always admired complex apps like 280 Slides, so was excited to be building something with similar problems. I started writing
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
