先日、とあるJavaScript関連の記事を読んでいたところ、"Optimistic Updates" という技術が紹介されていました。 日本語に直すと "楽観的更新" といったところでしょうか。 はじめて聞いた言葉で、日本語の記事も見当たらなかったため記事にしてみます。 #Optimistic Updatesとは Optimistic Updatesというのは、ネイティブアプリやSPA(Single Page Application)などで使われる技術で、非同期の通信処理が成功するという前提(楽観)のもとに、通信のレスポンスを待たずに次の処理を行うというものです。 最も多いOptimistic Updatesの使い方は、UIへの反映をリクエストの結果を待たずに行うというものでしょう。 #Optimistic Updatesの例 例えば、よくある「いいね」ボタンのようなものにOptimis
はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo
アプリマーケティング研究所 > アプリ開発 > UIデザイン時の「ユーザーの使いづらい」には2パターンある。350万ダウンロードの家計簿アプリ「Zaim」が教える、UI改善の失敗談。 今回は350万ダウンロード突破、家計簿アプリの「Zaim」さんにお話を伺いました。ユーザーが伸びたタイミングや、UI改善の失敗談など。 ※株式会社Zaim 代表取締役 閑歳 孝子さん。 「Zaim」の近況について 「Zaim」のユーザー数は今どのぐらいですか？ 閑歳： 2011年7月にリリースして、350万ダウンロードを超えています。OSで言うとiOSの方が多いですが、最近はAndroidも伸びています。今も広告費は使っていません。 今までに、ユーザーが大きく伸びたタイミングはありますか？ 閑歳： 去年はダウンロード数がグッと伸びた印象があります。2013年の終わり頃から、スマホをみんなが本当につかうようにな
A workshop with Mark Geyer Wednesday, November 12, 2014 Use keyboard arrows OR swipe to navigate ;) In case you bail... Here are the slides: markgeyer.com/pres/the-art-of-ui-animations I work at Salesforce in R&D UX... ... specifically on the Systems team. ... because of that illustration, I saw cats for dayz! What are we doing tonight? Tools and setup Any browser ;) Install node.js (nodejs.org) v
Most designers today create static mockups to communicate app ideas. But increasingly apps are anything but static, which means as designers we need a better tool for interaction design. Origami is a free toolkit for Quartz Composer—created by the Facebook Design team—that makes interactive design prototyping easy and doesn’t require programming. Quartz Composer is a freely-available Mac OS X appl
Deceptive patterns (also known as “dark patterns”) are tricks used in websites and apps that make you do things that you didn't mean to, like buying or signing up for something. For example:
公開日 : 2009年10月20日 (2020年8月30日 更新) カテゴリー : ユーザビリティ ユーザーインターフェース (UI) デザインの専門用語に「モーダル (modal)」と「モードレス (modeless)」という言葉があります。Web サイトの UI を設計するうえで、おさえておきたいキーワードだと思いますので、簡単に触れたいと思います。 「モーダル」「モードレス」とは？ ユーザーインターフェース設計のコンサルティング会社、ソシオメディアさんの用語紹介 (グロッサリー) によると、「モーダル」「モードレス」はそれぞれ下記のように定義されています。 モードがある状態。つまり、システムが特定の機能の使用に制限された状態。ユーザーが自由に操作を行えなくなることと、モード別に機能の意味や振る舞いが変化することから、ユーザーインターフェースのデザインでは、できる限りモードを設けないほ
モノづくりをテーマに行われた『TechLION vol.18』。登壇者は左から寺薗淳也氏、瀬尾浩二郎氏、増井俊之氏 コンピュータはこの30年、まったく進歩していない――。 有名エンジニアによるトークライブの場としてすっかりおなじみになった『TechLION』の壇上で、慶應大学環境情報学部の増井俊之教授は業界の現状を憂えた。 2014年9月に開催された『vol.18』のテーマは「モノづくり」。小惑星探査機『はやぶさ』プロジェクトチームの一員としても知られる会津大の寺薗淳也准教授、面白法人カヤックから独立しフリーのエンジニア/クリエイティブ・ディレクターとして活躍中の瀬尾浩二郎氏とともに、UI研究の第一人者、増井教授は登壇した。 時々刻々と性能が上がっているように見えるコンピュータ（編集部注:増井氏の発言では「計算機」）が、30年にわたってまったく進歩していないと指摘する増井氏の真意とは？ 『
「Yahoo! JAPAN DeNA iOSエンジニア UI/UXデザイナー勉強会」に参加してきました！ ちょこっとずつですが、各発表で心に残った部分をメモしたのをのせますー （メモだけじゃ全然内容わかんないのでスライド公開されたらリンクさせていただきたい・・・。） ちなみに発表内容はイラストレーターさんにより会場でリアルタイムでイラスト化されていました！すごい！ 描かれたあと会場に掲載されていたのでその写真も一緒に載せます！ブレ気味ですみません。。 マンガボックスのアプリができるまで (坪田 朋さん@DeNA) PhotoshopからSketch 3へ移行 プロトタイピングツールProttの導入 （最初だったのであんまりメモできなかった。。。） タブレット版「Yahoo!ニュースアプリ」のこだわり (田中 淳子さん@Yahoo!) 当たり前を上質に〜とにかく読みやすく〜 デバイスを知る
「Empty Data（またはEmpty Status）」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります（Webでの404に近いですが、少し違います）。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし
ADSCHEAPER.COM Serving Billions of Advertising Impressions Per Day! Dirt Cheap... THIS DOMAIN MIGHT BE FOR SALE! CONTACT US THROUGH KITTEN-CHAT ON THE BOTTOM OF THIS PAGE! Check WHOIS to see who owns a domain Please click the ad below and we make $10 from the Oregon Mint Snuff Co.! (And you'll learn a great way to quit chewing tobacco!) Click the ad just below that and we make five dollars if the
6. 目次 1章 : Structure - アプリの構成と階層 2章 : Branding - オリジナリティを出す 3章 : Helps - ユーザーを導く 4章 : ViewPager - 画面切り替えの定番 5章 : Support Tablet - 柔軟性のあるレイアウト 6章 : CustomView - 思い通りのレイアウト 7章 : Advanced - 1つ上のカスタマイズ
The Future of UI and the Dream of the ‘90sI once worked for a client where I was the only Designer on the team and the only female involved in building the product.Helen Tran in UX/UI human interfaces8 min read I once worked for a client where I was the only Designer on the team and the only female involved in building the product. The client was obsessed with integrating ‘social.’ Despite my gene
著者：アラ・コルマトヴァ（Alla Kholmatova） 翻訳者：浅野 紀予 インターフェース上のアイコンを、ただの装飾要素ではなく、その価値を高める要素にするのはどんなポイントでしょうか？ 直感的であること、美的価値があること、記憶しやすいこと、それとも文化の違いを超えて知覚できること？ 効果的なアイコンはそれらの特徴をいくつも持ちあわせていますが、私はあるひとつの尺度に注目したいと思います — それは認識速度、つまりそのアイコンをどれくらいの速さで発見し識別できるか、という尺度です。 単純な暇つぶしアプリなら、認識速度の違いは大した問題ではなく、体験全体を揺るがすほどの影響を与えはしないかもしれません。 でも、複雑なトレーディングアプリでは事情が異なるでしょう。その場合、アイコン表現に求められる要件は、一段とスピード優先の傾向を強めます。個々の要素の処理時間が、インターフェース全体
10. UIGravityBehavior UIGravityBehavior* gravityBeahavior = [[UIGravityBehavior alloc] initWithItems:@[self.square1]]; gravityBeahavior.gravityDirection = CGVectorMake(0.0f, 1.0f); gravityBeahavior.magnitude = 1.0f; gravityBeahavior.angle = -M_PI/2.0; •重力の強さと方向を設定可能 11. UICollisionBehavior UICollisionBehavior* collisionBehavior = [[UICollisionBehavior alloc] initWithItems: @[self.square1, self.squ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
