Tries for creating a UXD culture

インフラ企業で働くフロントエンドエンジニアの挑戦河原覚 2014-09-27 @ UX-Sapporo × CSS Nite
in SAPPORO よりよい UX のために（編集版）

河原覚 @esukei かわはらさとる

プラットフォーム事業部サービス開発チーム

さくらの VPS コントロールパネルフロントエンドエンジニア UI デザイナー

・UX を考えるにあたって直面した問題・問題を解決するための挑戦はじめに・さくらインターネットは全体で 200 人規模・プロジェクトには複数の部署が参加

2013 年 7 月開発部インターフェイス設計担当として入社

1ヶ月後さくらの VPS コントロールパネルリニューアルプロジェクト参加

せっかくリニューアルするんだから、コントロールパネルにとどまらないで、サービスの UX も考えたい！

領域が分断している

紹介サイト部署 A 会員登
録部署 B コントロールパネル部署 C ヘルプページ部署 D VPS 関連コンテンツと分担

UI デザインに十分な時間が取られていない UI デザインの修正が行いにくい

それまでの UI 開発フロービジュアルデザイン HTML+CSS サーバサイドテンプレート化必要に応じて修正・追加仕様検討・環境構築開発内容の決定デザイン
開発

UI デザインの認知度が低い UI をデザインする文化がない

こういうレイアウトでどうでしょう？あ、ここちょっとまずそうだね。どう直したらいいか意見ありますか？うーん�� ◦◦したらいいかも� ？じゃあ、それで次回までにお願いします。！？
とある会議メンバーわたし進行役

UI デザイン品質責任者の不在

？会議では承認取ったけど、良し悪しは誰が判断するんだろう� だいたい決まったあと

あれ？ UX デザインとか言ってる場合じゃないんじゃ�？

それでも、やっぱり�

サービスとして、ブランドとして、よりよい UX を考えていきたい。

UX デザインのために必要なこと・横断的に行える環境・持続的に行うための文化

UX と UI の関係誰にどう使って欲しいのか適切な UI ・UXD を実現するための UI
・持続的な UXD に　対応できる柔軟な UI 開発環境

UI デザイナーとして、フロントエンドエンジニアとして、できることから挑戦

UI デザイナーとして

・デザイン文化の醸成・UI デザイン手法の導入

デザイン文化の醸成

・UX は横断的に取り組まないといけない・UI デザインは開発の一部・よりよいサービスのために UX を考えたい地道に啓蒙

「デザイン上の理由」で発言するここは使いやすさを考えて、このようにしてみました。こういう提案がありましたが、使いやすさを損なうと思うのでこのままで行きたいと思います。

UI デザイン手法の導入

・ペーパープロトタイピング・PC 上で操作できるモック・ユーザテスト

ペーパープロトタイピング・実際の開発やビジュアルデザイン制作の前に　紙の上で画面を検討する手法・ワイヤーフレームよりもより具体的な画面を起こす・ユーザビリティ上の問題を早い段階で検討し、　クオリティアップや開発中の手戻りを少なくできる

操作できるモック・ペーパープロトタイピングの結果を清書し、　リンクを貼るなどして操作できるようにしたもの・より実際の操作環境に近づけて検討ができる・ユーザテストを行いやすくする

ユーザテスト・社内の人間を捕まえて実施・テスターのバランスをとるため、　社内であっても詳しくない人に頼んだり・操作可能なモックを利用・大きく変わる箇所について仮説を検証

・よりよい UI デザインのため・メンバーへの共有のしやすさ・意見の裏打ちとなる客観データ UI デザイン手法導入の意味

よりよい UI デザイン環境へ文化の醸成手法の導入＋

フロントエンドエンジニアとして

・フロントとバックを疎な構成に・フロントエンド開発環境の改善

関係を疎にする RESTful API を中心とした構成への変更

これまでのフローデザインフロントテンプレート機能開発

API 中心のフローデザインフロント API 仕様決定

・API を利用した UI 開発に集中・API を提供することに集中フロントエンドバックエンド

・フロントエンド開発環境上に　サーバを用意するさらに開発しやすく

タスクマネージャでサーバ構築 grunt-contrib-connect サーバを立てる grunt-connect-proxy リバースプロキシ node-easymock お手軽 JSON 配信サーバ

connect proxy / /api /api/feature app index.html assets プロジェクトフォルダローカルサーバ構成
servers.json switches.json accounts.json API モックフォルダ node-easymock http://0.0.0.0:3000 にアクセステストサーバなど

・テストサーバの用意も待たなくて良い・フロントエンドだけでも　実践的な開発を進められる・依存関係をより少なく出来るローカルサーバの利点

UI デザインの改善も進めやすく開発環境改善構成変更 +

UI デザイナーとして・文化・手法導入フロントエンドエンジニアとして・環境改善

UXD のための柔軟な UI 開発環境挑戦結果

適切な UI デザイン開発効率化使いやすさをデザインしたコントロールパネルへ + 開発中のコントロールパネル

まとめ

なぜ UX を考えるのか

UXD は何のために・戦略にもとづいた開発 / 改善・サービスの品質を向上させる

ユーザのためのよりよいサービスを提供したい！

UXD の取り組み方・サービスに関わるすべての人と共有・持続的に改善していく

・周りを巻き込むための工夫が必要

・納得してもらう必要がある・開発フローの改善等で可能な限り吸収するコスト/ 時間の増加・現状の改善のため・更なるクオリティアップのため・長期的な最適化のため、など説得材料

一人で全部は難しいし、時間がかかるかもしれないけれど�

自分の手の届く領域から挑戦を

よりよい UX を目指してさらに挑戦していきます。

Tries for creating a UXD culture

Tries for creating a UXD culture

More Decks by Satoru Kawahara

Other Decks in Technology

Featured

Transcript