sitateru tech blog: UI/UX

sitateru tech blog

シタテルの技術やエンジニアの取り組みを紹介するテックブログです。

ラベル UI/UX の投稿を表示しています。 すべての投稿を表示
ラベル UI/UX の投稿を表示しています。 すべての投稿を表示

2019年2月28日木曜日

デザインレビューはじめました

2月 28, 2019
こんにちは、デザイナーの藤村です。デザインチームで最近デザインレビューを始めました。とても勉強になるし、やっていてデザインそのものの面白さにさらに気付かされています。チームでTryしている内容をご紹介します。

※ここで言う「レビュー」とは、リリース判断の可否を決める機能のことではなく、デザインをブラッシュアップさせるための、批評とフィードバックそのものを指しています。

開発チームの一員としてのデザイナー

シタテルの開発チームは、デザイナー1名+エンジニア数名+関係者(企画、マーケ、営業、生産など様々)という構成です。デザイナーは特定のサービスに所属しており、これまでデザインのレビューはサービスチーム内でのみ行なっていました。シニアエンジニアが実装判断した上でチームで要件定義を行い、デザイナーが仕様の叩きを作成、フィードバックをもらいながら徐々にビジュアル面を作り込んでいくという流れが主です。

開発チームでのレビューのいいところ

複数の職種で構成されているため、さまざまな視点からの批評を集めることができます。
エンジニアは機能的な破綻がないか、条件による表示を想定できているか、堅牢性を保つことができているのか、と言った視点で批評を返してくれます。お客様と向かいあっている方からは、お客様に対して自身が機能や画面説明ができるのかという視点で、マーケティング担当は有用なデータが取れるのかという視点で、それぞれフィードバックを返してくれます。

悩ましいところ

一方で、狭義の意味での”デザイン”を批評する環境がありませんでした。機能上は問題ないのに違和感がある、なんだか野暮ったい、画面を使おうとしたとき操作に迷う瞬間がある。。ちょっとした相談はデザイナー同士でしてましたが、お互い忙しそうだと遠慮してしまったり、各々がモヤモヤしながら自分ひとりで格闘していました。

デザインチームでレビューを始めた

シタテルのデザイナーは週に1回情報共有のための定例会を行なっていました。各プロジェクトの進捗を共有することを目的にしていましたが、みんなでデザイン力を上げようということで、他サービスのデザインレビューもやってみることにしました。
意見がほしいときは、以下のテンプレートを使ってGithubにissue化します。見てほしいデザイナーにアサインをして、後はみなさんの意見を待ちます。

レビューをしてみる

Zeplinにコメントをしあう形で進めました。1デザインに対して数十に及ぶ場合もありました。私自身もいざコメントをしようとすると、どこに違和感や改善点を見出したのか、なかなか言葉にすることができず思った以上に時間がかかりました。

どうしても、「こうして欲しい」という指示型のコメントになってしまうのです。「ここでは目的と違う認識をしてしまうので再考が必要だと感じました」のように、根本的な問題点を指摘するようにするには、批評者自身もそこまで潜っていかないと見つけることができないんだなと実感しました。デザインをどう見るか、焦点がどんどん精緻化していくので、とても面白く勉強になります。

3週間やってみて

デザイナー定例でみんなで振り返って以下のような感想があがりました。やってみた感覚と共に、もっとよくするためのアイディアも色々出てきました。当たり前のことなんですが、実際にやってみるって本当に大切ですね。
これからもレビューを重ねていって、私たち自身のデザインを見る目を育てながら、チームで成長できる方法をTryしていきたいと思います!

2018年12月6日木曜日

チームでのUI/UX改善のための取り組み「マイオペ触る会」のご紹介

12月 06, 2018

こんにちは!

シタテルでエンジニアをしている建山です。

主に工場向けのマイオペというシステムの開発を行っています。

シタテルでは、チームがプロダクトなどでわかれており、今担当しているマイオペチームでは、
デザイナー、エンジニアが一緒になって開発をしています。

その中で、「マイオペ触る会」というのを隔週で行っています。

その取組の目的や方法をご紹介します。

マイオペ触る会って

普段開発しているプロダクトを、開発しているメンバー全員でユーザーの気持ちになって操作する時間を設けています。

目的としては、以下のような感じです。

・ユーザーの目線に改めてなって自分たちが作っているものを使うことで、気づいてなかったユーザーの課題やUI/UXの問題を洗い出す
・ユーザー目線を忘れないようにする意識付け

方法として、それぞれ行いたい時に非同期でやろうとしたのですが、開発の忙しさに追われてやらないことがあったため、みんなで同じ時間に集まって行うようにしています。

マイオペチームは拠点がバラバラなため、触る会の際は、zoomを繋ぎっぱなしにして話しながら進めています。

以下のような、googleスプレッドシートを活用し、どういうストーリーで操作したかの簡単な説明、画面ごとの問題や気になったことを各自書いていきます。

終わった後はイシュー化

終わった後はgithubでイシュー化して、議論検討したり、ユーザーインタビューしてみたり、開発計画に組み込んで進めたりしていきます。

やっていてよかったこと

目的にも書いていますが、開発しながら毎日自分たちのつくっているものには触れ合っていますが、あらためて、ユーザーの気持ちになっと触る時間を設けると、また初心に帰ることができるし、新鮮な気持ちでユーザーの課題が見えることもあります。
また、触る会をきっかけに チーム全体でもユーザー目線で活発な議論が発生していると感じていてやっていてよかったと思う点ばかりです。

まとめ

今回は、チームで取り組んでいる「触る会」をご紹介しました。チームでは他にも、いろいろな取組をしていますので、また追々紹介したいと思います。
チームや状況に合わせて、引き続きいいやり方を模索しながら改善していきたいと思います!
優秀なUI/UXデザイナーがチームにいますので、きっと記事を書いてくれると思います。笑

2018年12月4日火曜日

シタテルで使っているデザインツールのご紹介

12月 04, 2018

こんにちは!シタテル株式会社UI/UXデザイナーの田仲です。
今回はシタテルのデザイナーが使っている、デザインツールをご紹介します。

Sketch


デザインの作成はSketchをメインで使っています。去年まではPhotoshopがメインでしたが、下記で紹介するAbstract導入をきっかけに、Sketchをメインにしました。


Photoshopに比べると、とても軽いのでストレスなく使える点が気に入っています。アップデートが頻繁にあるため、その度に少し迷うこともありますが、アップデートでの変化を発見することが楽しみのひとつでもあります。
便利なプラグインもたくさん出てきているので、個人で試してチームにも導入していけたらと考えています。

Abstract


Sketchのバージョン管理ツールです。同じSketchファイルを複数のデザイナーが修正したり、サポートしあえるようにしています。


先日SketchのバージョンにAbstractが追いついていないことがあり、気がつかずSketchのバージョンを上げた時にSyncできない問題が起きてしまいました。(その時はSketchダウングレードして解決しました。)気軽にSketchのバージョンを上げられないという点は、微妙だなと感じています。
現在は複数人で作業しているプロジェクトは1つしかいない状態なので、もう少し共同で作業するプロジェクトを増やし、お互いの知見を増やすことにも活かしていけるような使い方をしていきたいなと考えています。

Adobe Creative Cloud


PhotoshopやIllustratorは、Sketchでは作業しにくい写真の加工、パネルや印刷物の作成を中心に使っています。


他にも、XDは気になる機能が次々に出ており、将来的にツールをAdobeに集約できると、データの互換性やコストなどの面でメリットがあると考えています。まだAbstractとSketchの方が便利だという結論から移行は考えていませんが、最新動向には日々注目しています。

Zeplin


デザイナーが作ったデザインをエンジニア確認できるツールです。開発内でのレビュー、最終的にエンジニアが実装するときに使っています。


コメントができる点はinVisionと変わりがないのですが、サイズやカラーコードがわかるだけでなく、アイコンのダウンロードなどもできるので、デザイナーとエンジニアのやりとりを減らすことができています。今後はよりエンジニアとどうやったらもっと便利になるかを話し合い、ガイドラインなどとしても活用できるようにしていけたらと考えています。

InVision


プロトタイピング・レビューに使用しています。


InVisionはコードなどの情報がないので、デザイナーとエンジニア以外の生産や営業などのメンバーがレビューに参加する際に使っています。シタテルでは開発以外の職種のメンバーともデザインの段階から頻繁に意見を交わしています。これからも部署問わず、よりよいプロダクトをつくり上げるためにコミュニケーションを活発にしていけたらと思います。

以上、シタテルで使っているデザインツールのご紹介でした。
シタテルでは、積極的に新しいデザインツールや機能を試し、今よりよりコミュニケーションしやすい&デザインしやすい環境となるものがあれば乗り換えていきたいと考えています

2018年11月9日金曜日

マイオペレーター開発のために「価値マップ」つくりました!

11月 09, 2018

こんにちは!シタテル株式会社UI/UXデザイナーの田仲です。
私はマイオペレーター(以下、マイオペ)という縫製工場の生産管理者向けのシステムを担当しています。マイオペでは人間中心デザインを取り入れることに挑戦しています。

マイオペの開発メンバーは熊本にエンジニア2名、東京にデザイナー1名と場所が別れているのですが、先月熊本で集まることができたのでいくつかワークショップを開催しました。

日頃より縫製工場の生産管理者に、感想などをヒアリングしたものがあったので、価値マップを作成しました。

『価値マップ』

①KAカード作成

インタビューで気になったユーザーの行動を「出来事」として抜き出し、出来事を元に「ユーザーの心の声」を出します。そして、「価値」を導き出していきます。ネガティブな意見(「〜ができていない」など)は、ポジティブな価値に変換して、「未充足」として取り扱います。

②KJ法(親和図法)

次に、KJ法でKAカードを分類していきます。話し合いながら関連していることや、ストーリーを線や矢印でつないでいきます。
image from ios 2

③調査からの気付き&現状、提案に向けた着眼点をまとめる

image from ios 3

データに基づいた分析ができずにいたので、今回はいいきっかけになったとおもいます。
使用したヒアリング結果は10分程度で軽く聞いたものだったこともありまだ内容としては薄いため、これからはもう少し踏み込んで計画に基づくインタビューを行い、再度価値を模索していきたいですね。
この価値マップ作成後、別の調査データと合わせて、新たなペルソナもつくりました。次回は、アイデア出し、コンセプト作成まで一通りやってみようと考えています。

参加したメンバーの感想

建山

とても思考の整理になったのと、チームで共通認識、課題に向かっている感じが強化された気がしてとてもやってよかったと思います。
ワークショップでしようするインタビュー等のインプット情報の質をもっと高くして、適切なタイミングで引き続き、実施してみたいと思いました。

木村

リリース後、1〜2, 3 と進んでいくにあたり、良いタイミングで仮説の整理が出来たと思います。今後プロダクトが成長していく上で、良いサイクルが生み出せるのではないかと感じています。

最後に

マイオペの開発チームではユーザー目線が根付くための取り組みや、「誰のためになぜ作るのか」という点を考える時間を大切にしています。 業務に追われてなかなかまとまった時間が取れないので、今回のようなワークショップで定期的に分析などをしていけたらと思います。