読者です 読者をやめる 読者になる 読者になる

暮しのUI手帖 ときどきUX

UIに関する雑記帳です。たまにUXも取り上げます。

ちょっといいなと思ったUIメモ8

Trello のパスワードリセット通知画面が遊び心があって良い。特攻野郎Aチームばりの心強い味方が来てくれる感がある。

f:id:asyst:20161214135730p:plain

引用元:https://trello.com/forgot

ちょっといいなと思ったUIメモ7

動作環境などをゆるく伝える表現例として。絵文字にしても良さそう。

f:id:asyst:20161020124246p:plain

引用元:https://wordpress.org/plugins/advanced-custom-fields/

ちょっといいなと思ったUIメモ6

イギリスのEU離脱余波と円高のおかげで保有株の値がぜんぜん上がらないため、腹いせに前から欲しかったPhpStormを購入しました。

購入時に支払い方法をクレカかPayPalか選択できるのですが、クレカの情報入力用インタフェースが良かったのでメモ。

f:id:asyst:20160622163251j:plain

引用元:https://www.jetbrains.com/phpstorm/

 

上記の図を見てもらえば一目瞭然だと思いますが、購入画面にはクレジットカードに似た画像が表示されていて、利用者は手持ちのクレジットカードに沿って情報を入力すれば良いため、ストレス無く入力出来るのではないでしょうか。

ちなみにクレカの入力自体がストレスなため、私はPayPalで払いました。

 

ちょっといいなと思ったUIメモ5

f:id:asyst:20141008193831p:plain

Sublime Text 2 で別々のディレクトリにある同名のファイルを開くと上記の画像にあるように「ファイル名 ー ディレクトリ名」と表示してくれて地味に便利。

ちょっといいなと思ったUIメモ4

f:id:asyst:20141008192932p:plain

pixivのユーザー登録完了画面。

ドメインGoogleの場合、[今すぐGmailに移動]というボタンが表示され、このボタンをクリックするとGmailのログイン画面に飛ぶ。

あくまで推測になるが、Webメールとしてサービスを提供している他のサービス(Yahoo!メールやOutlook.com等々)の場合も同様のボタンが表示されるようになっている可能性が高い。

気の利いた良いアイデア

 

【AIIT】人間中心デザイン 講義ノート#2「デザイン操作論」

はじめに

#1のノートがまとめきれていませんが、2014年の8月22日〜23日にかけてAIITで行われた人間中心デザインの私的メモを以下にまとめます。

講義の前半はがっつりとした座学で、理解するにはデザインの歴史や意味論、記号論に関する前提知識が問われる部分も多いため、未だにあやふやな部分も多いですが、非常に濃密な講義でした。

デザイン操作論(Control of Design)

概要

デザイン操作論ではその名が示す通り、いかにしてデザインというものをコントロールするか、想い通りにデザインを行うにはどうすれば良いかという方法を、過去から現在に至るまで、デザインというものがどのように遷移してきたのか、また、デザインの歴史において重要なパラダイムとなった、クラウス・クリッペンドルフの「意味論的転回」という考え方を交えつつ、「形を」どのように「エレガント」にするのかというコントロール手段を探って行く。

デザインとは何かに関する結論 → Design is making sense of things.

デザインをコントロール出来るようになるには、そもそも、まずデザインとはなにかという事を理解しなくてはならない。

初っぱなから結論を言ってしまうと、デザインとは「物の意味を与えること」である。

これはつまりデザインとは“意味を造り出すプロセスそのもの”を指しており、デザインによって生み出された製品は、すべからくそれを利用する人々、ユーザーにとって理解出来るものでなければならない。

「合理的な視点」でのデザインにおけるかたちの操作

デザインとは何かという事を一応定義した上で、まず「合理的な視点」でデザインにおける「かたち」というものを操作する方法を考えてみる。

合理的な視点でのデザインにおけるかたちの操作は以下のようにまとめる事が出来る。

①リフレーミング(再構築)

 - 変形 : 既存のものを変形する
 - 代替 : 代わりとなるメタファー(比喩、レトリックなど)を利用する
 - 類似 : 与えられた状況の類似を探す
 - 視点 : 色々な論理的視点、特に様々な分野から獲得される視点を用いる

組み合わせ論

- 単純化:機能を実現するために不可欠な構成を明らかにする

- 最適化:機能を実現するための「最適な」構成を決定する

- パターン:対象、部品、仕様、機能の組み合わせ可能な構成を判定する

③合理的な視点でのデザイン操作の事例

- 家庭用ミシン

  -- 変形:アームを後方にし手前を広くする

  -- 視点:メンテナンスが難しい -> 底部を開ける事で内部の手入れを容易にする

- 運動競技場所のグラウンドキーパー

  -- 単純化:構成要素の整理(運転者、エンジン、駆動輪など)

  -- パターン:組み合わせの車輪数、構造などを列挙する

「審美的な視点」でのデザインにおける形の操作(モダンデザインへの道のり)

合理的な視点でのデザイン操作を踏まえた上で、今度は「審美的な視点」でのデザイン操作について考えて見る。

この辺りを真剣に学ぶには、19世紀ヨーロッパでのW・モリスによるアーツ・アンド・クラフツ運動など産業革命以降のデザインの遷移を踏まえておく必要があるが、ものすごく端折って言うと、審美的な視点での形の操作は、20世紀初頭にドイツで創設されたバウハウスに端を発する。

バウハウスではデザインの「discipline」つまり、原理原則を解明しようとしていた。

 「審美的な視点」での形の操作の基本ルール

審美的な視点での形の操作の基本は上記の2つである。ゲシュタルト心理学については後で触れるとして、バウハウスでは特に「シュパヌング(緊張、電圧)」という概念が重要であると考えられていたようだ。

※ このシュパヌングという概念は全く理解出来ていないのだが、講義を聞いていて思ったのは日本刀のような、無駄なものを一切を削ぎ落とした美しさ、機能性と審美性が緊張感を伴いながら一体となって胸に迫る様というかそのような人間の知覚を概念として昇華したものがシュパヌングではないかと思った。(全く違う可能性も高い。)

※また、バウハウスの精神を受け継いだウルム造形大学ではデザインのパラダイムに関する説明として、さながらコーヒーに垂らしたミルクの様に、デザインはシュパヌングに始まり、それが徐々にコモデティ化していくと教えていたらしい。これは近年で言えば立体的なスキュアモーフィックデザインからより平面的なフラットデザインへの遷移などで何となく経験的に理解できた。

審美的な形式の探索
  • リファレンス(資料)を活用したよりエレガントな形の探索
  • 解決策の可能性を拡げる新しい「造形言語」の探索(説明が難しい!)
意味を与えるための操作
  • 記号論的視点:ICON(イコン)、INDEX、SYMBOL

  • レトリックの活用:プロダクト・セマンティクス、知覚されたアフォーダンス、シグニファイアといった概念

  • デザインテイストの利用:イメージボード、デザイン言語の活用

 モダンデザイン運動

なぜモダンデザインの成り立ちを知る必要があるのか

注意:このあたりは私なりにかなり意訳してまとめたものです。講義ではこのような説明はしていません。

これまで合理的な視点と審美的な視点という2つの視点からデザイン操作の方法を論じて来たが、ここに来てなぜ殊更に「モダンデザイン」というトピックを取り上げる必要があるのかというと、産業革命の成果である「標準化」「規格化」された合理的な製品による、大量生産・大量消費といった「物的」な側面と、それに合わせて誰もが利用しやすく、ユーザーが欲しいと思う審美的な「質的」側面の両面を満たした製品をが望まれ、時代背景から「誰もが美しいと感じる」製品が求められた結果、モダンデザインの思想へと繋がったからに他ならない。

モダンデザインの始まりには諸説あるようで、一般的には19世紀後半のW・モリスによるアーツ・アンド・クラフツ運動が始まりとされるようだが、講義ではこの件に関してあまり触れる事は無かった。

19世紀後半のドイツでは輸出が伸び悩んでいた事もあり、経済界等の支援を得て「標準化」が叫ばれ始めていた。そして20世紀になり、1907年にドイツのミュンヘンで産業家や建築家による団体「ドイツ工作連盟」が組織され、「標準化」「規格化」に基づく大量生産によるものづくりが提唱された。

バウハウスの誕生

バウハウスだけで何冊も本が書けるため、ここでは本当に初歩の部分にしか触れないが、上記のドイツ工作連盟の流れを汲み、1919年にドイツのワイマールで工芸、写真、デザイン等を含んだ美術全般と建築に関する総合的な教育機関としてバウハウスが設立された。このバウハウスによってモダンデザインの基礎が形作られることとなる。

以下は講義資料からの抜粋。

バウハウスの計画は、日常生活の形態的、美的革命をとおして、産業革命の成果(物の量)を、質的側面で完成させた。

デザインは自らに社会的目標と政治的目標を課してきました。環境の機能的解放をとおして、デザインは社会関係により大きな透明性をもたらし、物の所有者に関して全ての人達に民主化と平等化を促進させようと望みました。

ジャン・ボードリヤー特別講演(ICSID '73 KYOTO)

モダンデザイン以後の歴史:デザイン機能の変移

f:id:asyst:20140828160227p:plain

※上図は講義資料より抜粋

インダストリアルデザイン栄光の時代(〜1950年代半ば迄)

デザインに対する時代の要請:
人間工学(エルゴノミクス、ヒューマンファクター)に基づいた、「物的機能の要請」

この時代では機械という形も実態もある物理的な仕組みを、いかに効率よく、 合理的に展開するかという形作りが求められた。

作り勝手や使い勝手といった要望を直ちに工業製品や生産計画に反映する事が出来た時代でもある。

形と機能の合一性という、コード(指針)を審美的・質的な規範としたモダンデザインの形態言語がものの世界に実現されていった。

反面、機械という形も実態もある機能の論理に沿ったデザインの形態形成が可能な最後のステージでもあった。

モダンデザイン解体の時代(1960年代以降)

デザインに対する時代の要請:
周辺にあるモノとの相互関係、使用環境等との関連性の配慮など「環境機能の要請」

技術革新による電子化への移行と、工業化社会がもたらしたミドルクラスの勃興による高度消費社会の影響により、市場を中心とした商品の開発、デザインテイストの多様化、加速度的な製品のモデルチェンジの常態化につながる。

モダンデザインの枠組みを超えた、新しい形態形成原理は誕生せず、無自覚なデザイン生産がものの氾濫と環境破壊を招く。

受難の時代(1970年代以降)

デザインに対する時代の要請:
記号性や象徴性を重要視したターゲットの心をくすぐる「コミュニケーション機能の要請」

オイルショック以降、低成長社会のデザインのテーマは以下のように変化した。

  • 真の豊かさとは何か
  • 量より質
  • 「もの」より「こと」
  • 人と心の問題の解決

これらのデザインに求められる社会的な変化によって、商品の脱機能化が進み、一過性のガジェット類が市場に溢れ、複合化によって新鮮さを演出したり、リバイバルスタイルが出現するようになった。

この時代ではものの消費を維持するために市場中心的なデザイン操作、記号の消費促進が行われた。

形の喪失(特に1980年代以降)

電子部品は機械のようにそれらしい形や実体が現れないために、形と機能の合一性という形態原理を適用出来ない。

この電子という新たなテクノロジーの出現によって、形は機能と形態との形態的有縁性を失い、電子を包む外皮、あるいは表層として必然的な自立を果たした。

これにより、モダンデザイン(形と機能の合一性)は解体され、今日に至まで、モダンデザインの枠組みを超えた、新しい形態形成原理、もしくはコード(指針)の創出が求められている。

形の終焉と再生(1980年代以降)

デザインに対する時代の要請:
形の意味の問題を問うための「インテグレーション機能の要請」

情報社会の急速な進展により、一層と形態を失ったものの形を分かりやすく意味付ける(semantics)ことが重要となる。

「ものと使用者の関係」、「ものの社会的な意味」といった事をデザインという手段で可視化することが求められる。

そのために、ものの原初的な三大機能として、「物的機能」「環境機能」「コミュニケーション機能」を新しい世界認識の中でものの形態言語として改めて包括的にとらえ直そうという試みが行われている。

 

 

 

 

 

迷うUIのサンプル

すげー細かい事ですが良いサンプルを見つけたので戒めのためにメモ。

問題 

以下のように「ユーザID(メールアドレス)」と書かれていた場合、果たしてユーザーは何を入力するのが正解でしょうか?

f:id:asyst:20140825172502p:plain

答え

このサンプルの場合、「メールアドレス」が正解です。(うーん...)

考察

ユーザIDに関する説明(英数字のみなど)が無いため、また「※携帯メールアドレス不可」という文字が目に付くため、この場合は括弧にくくられているメールアドレスを入力するのが正解なんだろうという推測が出来ると思います。

ただし、推測は出来るものの、本当に正しいかどうかは入力フォームのバリデーションが働くまで分かりません。

また、あくまでも推測の域を出ませんが、システムの仕様上、ユーザIDとメールアドレスが一意の利用者を表すキーとして混在していたり(開発者が発狂しそうな仕様ですが。)、システム上の何らかの制約や問題によりこの様な表記になっているのかもしれません。

あるいはシステムの設計者としてはこのサービスのユーザーに「ユーザID=メールアドレス」として認識して欲しいという気持ちがあるのかもしれません。

この思考は個人的に良く分かります。

しかし、このような思考は設計者にとって都合の良いユーザー(ゴムのユーザー)を思い描いているだけで、現実のユーザーとは大きな乖離があります。

今回の事例については、単純に「メールアドレス」とだけ表示しておいてくれれば、ユーザーが迷う確率が低下するのでは無いかと思います。

私自身、相手に対して丁寧に説明しているつもりであっても、情報が冗長過ぎて、ノイズとしてしか伝わっていないという経験が多々あるため、適切な情報を適切なタイミングで表示するという、極めて当たり前の事を再認識させられました。