木曜日, 3月 21, 2013

HACKDESIGN Lesson9

HACKDESIGNという興味深いサイトがあって、最初はタイポグラフィとかデザインの基礎的な話題が中心だったんだけど、Month 3がUser Experience、Month 4はUser Interfaceということで、感想などをまとめてみる。冒頭でUXデザイナーの平均給与が高いとあるけど、これは限られた人しか就けず、母数が少ないポストだからなんじゃないかと思う。

Review: The Design of Everyday Things

日本では「誰のためのデザイン?」というタイトルで売ってる本のレビューで、いくつかの印象的な話が紹介されてる。もともとは1988年に"The Psychology of Everyday Things"というタイトルで出版されていたのだけど、その後PsychologyからDesignに変わったらしい。

課題は「よりよいユーザー体験よりも、デザイナーが楽をするために安易な選択をした事例を探そう」で、ヒントとして家電やリモコンを見てみようとある。

僕がいつもイライラするのはモバイルルータ。ボタンを長押しすると接続設定をマニュアルかオートに切り替えられるんだけど、マニュアル時は同じボタンを短く押すことでネットワーク接続を開始する。なのでなかなか反応がない場合に、よく誤って長く押してしまって意図せずオートに切り替わってしまう。元に戻すのにまた長押しして、今度は切り替わらないように気をつかって短く押すんだけど、未だにちょうどいい具合の押し方がわからない。

First Principles of Interaction Design

良くまとまっていると思った。Efficiency of the Userの項で、電子レンジで水を温める場合、1分10秒を指定する(1、1、0とボタンを押す)より1分11秒の方が速いというのはちょっと面白かった。0を探すのに1秒以上かかると、1分11秒間温めるのを待つよりも遅くなるという話。

Researching User Experience

ユーザー体験を調査する際にどの手法をいつ使うかという話。The Attitudinal vs. Behavioral Dimensionが面白くて、僕もよくTwitterやAppstoreなどでサービスについて言われていることを読んだりするし実際に意見を取り入れたりもするんだけど、正直「騒いでいるのは少数派」だなと感じることも少なくない。色々悪く言われてるように感じたとしても、定量データと照らし合わせることが必要。

Sketching User Experience

これくらい綺麗なワイヤーフレームを作ったり見たりしたいものだと思う。

Measuring User Experience

少ないサンプル数のユーザーの振る舞いから全体を予測する方法。意思決定に統計的な手法を取り入れる場面は今後も増えていくと思うし、そうしていきたい。

火曜日, 3月 12, 2013

stonewall開発日記12

前回の投稿を踏まえて、大きくリファクタリングした。変更点としては、
  1. レイアウト対象の要素を配列からオブジェクトにし、位置やサイズを持たせるようにした。
  2. 位置とサイズの計算だけをするcalculatePositionを作り、build内で呼ぶようにした。
  3. レイアウト対象の要素をcellからstoneという名前に変更した。

calculatePositionはDOMに対して操作をしないように心がけて、元のサイズを測る時にcloneNodeを使ってみたのだけど、テキストの場合にうまくいかなかった。苦し紛れに元のサイズを保持しておき、計算してから戻すということをしている。さらにコールバック関数を受け取って引数にレイアウト対象オブジェクトの配列を返すようにしてあるので、jQueryとかと組み合わせるとエフェクトをつけやすい。

Tumblr with jQuery

あとは追加や削除した際に効率的にレイアウトする機能をつけてversion 1としたい。

日曜日, 3月 10, 2013

stonewall開発日記11

exampleを改修してLoadNextボタンを押すと継ぎ足しできるようにした。今のexampleの処理の流れは

  1. LoadNextをクリックする

  2. Tumblrから次の20件を取ってくる

  3. 受け取ったデータを#containerに追加

  4. Stonewallで#container内の要素を全て並び替え直す


  5. となっている。「全て並び替え直す」というところはStonewallのインスタンスを作り直しているからなのだけど、既に並んでいるものをもう一度並べ直すのは無駄だし、数が増えるごとにその無駄が増えるので、追加した要素だけを並べるようにしたい。
    ということでadd()とremove()をつけることにした。並べる要素はDOM Elementのコレクションになっているので、いったん配列に変換して扱うようにしてある。まだ実装していないけど、任意の要素を削除したり、任意の位置に追加できるようにしたい。
    ただ、現状のaddやremoveは「Stonewallの管理下に入れる」「Stonewallの管理下から外す」ということでしかない。なのでaddしただけでは表示されないし、removeしただけでは表示が残ったままになる。単純に位置の計算だけを行うようにして、DOM操作を行わないようにするか、要素を追加したり削除することも含めて色々面倒を見るようにするか、考え直す必要がある。