Tries for creating a UXD culture

1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

領域が分断している

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

それでも、やっぱり�

19.

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

20.

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

21.

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

22.

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

23.

UI デザイナーとして

24.

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

25.

デザイン文化の醸成

26.

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

27.

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

28.

UI デザイン手法の導入

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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

38.

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

39.

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

40.

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

41.

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

42.

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

43.

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

44.

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

45.

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

46.

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

47.

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

48.

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

49.

まとめ

50.

なぜ UX を考えるのか

51.

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

52.

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

53.

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

54.

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

55.

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

56.

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

57.

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

58.

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

59.

None

Tries for creating a UXD culture

Tries for creating a UXD culture

Want more?

Transcript