О дизайне интерфейсов для HR-IT CLUB
-
Upload
oleksandr-lisovskyi -
Category
Design
-
view
480 -
download
1
description
Transcript of О дизайне интерфейсов для HR-IT CLUB
![Page 1: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/1.jpg)
HR IT club Киев, ноябрь 2014
Степень влияния закона сохранения сложности Теслера
на интерлиньяж
![Page 2: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/2.jpg)
![Page 3: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/3.jpg)
Александр Лисовский Cofounder & CEO at ZZ Photo
UX/UI designer
[email protected] facebook.com/alexlisovsky, pinterest.com/alexlisovsky,
![Page 4: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/4.jpg)
Тема доклада — это шутка?
![Page 5: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/5.jpg)
GUI UI UX
![Page 6: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/6.jpg)
UX
UX (User Experience), или опыт взаимодействия – это термин, описывающий степень
удовлетворенности пользователя от использования вашего товара или услуги.
![Page 7: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/7.jpg)
Самый эффективный инструмент проектирования взаимодействия исключительно прост: это точное описание пользователя продукта и его целей
А. Купер «Психбольница в руках пациентов»
![Page 8: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/8.jpg)
Персонажи – не реальные люди, но они представляют реальных людей в процессе проектирования. Это гипотетические архетипы реальных пользователей. Будучи воображаемыми, они, тем не менее, определяются достаточно жестко и точно. На практике мы не столько «выдумываем» персонажи, сколько обнаруживаем их в качестве побочного продукта процесса расследования. Но мы действительно выдумываем их имена и личные сведения.
А. Купер «Психбольница в руках пациентов»
![Page 9: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/9.jpg)
Создаем персонажи для сужения диапазона конечных пользователей. Представьте, что проектируете автомобиль, удовлетворяющий вкусам широких масс. Мамочке -‐ безопасная, надежная машина, просторная, с большими дверями, для перевозки детей, собак, пакетов с покупками и т. д. Плотнику -‐ крепкий полноприводный пикап, чтобы в него поместились лестницы, материалы. Младший руководящий работник видит себя в машине спортивного типа с мощным двигателем, жесткой подвеской, откидным верхом и – места в машине должно хватать только на двоих.
А. Купер «Психбольница в руках пациентов»
![Page 10: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/10.jpg)
Проектируем для одного
А. Купер «Психбольница в руках пациентов»
![Page 11: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/11.jpg)
UI
User Interface Design или пользовательский интерфейс – это более узкое понятие, включающее в себя определенный набор графически оформленных технических элементов (кнопки, чекбоксы, селекторы и другие поля). Его задача – помочь пользователю
организовать взаимодействие с программой/сайтом.
![Page 12: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/12.jpg)
1. Организованность элементов интерфейса. Логически структурированы и взаимосвязаны.
2. Группировка элементов интерфейса. Объединение в группы логически связанных элементов (меню, формы).
3. Выравнивание элементов интерфейса. 4. Единый стиль элементов интерфейса. 5. Наличие свободного пространства. Это позволяет
разграничивать информационные блоки, сосредотачивая внимание на чем-‐то одном.
![Page 13: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/13.jpg)
![Page 14: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/14.jpg)
GUI
Graphic user interface, GUI — разновидность пользовательского интерфейса, в котором элементы интерфейса (меню, кнопки, значки, списки и т. п.),
представленные пользователю на дисплее, исполнены в виде графических изображений.
![Page 15: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/15.jpg)
![Page 16: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/16.jpg)
Это невероятно…
![Page 17: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/17.jpg)
Скетчи
![Page 18: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/18.jpg)
Думать Документировать Экспериментировать
Объяснять и общаться
Быстрее потерпеть неудачу
Найти верное решение
Зачем?
h�p://konigi.com/book/sketch-‐book/
![Page 19: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/19.jpg)
Я не умею рисовать
h�p://www.youtube.com/watch?v=flJtdkR1P9I
![Page 20: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/20.jpg)
h�p://www.youtube.com/watch?v=flJtdkR1P9I
![Page 21: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/21.jpg)
Чем быстрее, тем продуктивнее! Чем «страшнее», тем лучше! Чем больше скетчеи, тем больше идей!
Не критикуйте! Не стремитесь к совершенству! Не фокусируйтесь на деталях!
h�p://www.youtube.com/watch?v=flJtdkR1P9I
![Page 22: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/22.jpg)
Че?
h�p://www.youtube.com/watch?v=flJtdkR1P9I
![Page 23: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/23.jpg)
Disney Concert Hall (Carol Highsmith)
h�p://www.youtube.com/watch?v=flJtdkR1P9I
![Page 24: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/24.jpg)
Исследовательский скетч + Много разновидностей -‐ Никому не понятно -‐ Низкая детализация
«Изящный» скетч + Более реалистичный + Показываем другим -‐ Долго делать
h�p://www.youtube.com/watch?v=flJtdkR1P9I
![Page 25: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/25.jpg)
h�ps://docs.google.com/fileview?id=0B916EDb6727eMGJlNjdhOTEtMmYxNS00OTQ4LTkxMTUtZmZjMjIzYmI4NTMw&hl=en
![Page 26: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/26.jpg)
h�p://hotdesignfor.us/news/2010/04/01/shablony-‐dlya-‐eskiza-‐stranic-‐sajta-‐na-‐bumage/
![Page 27: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/27.jpg)
Примитивы
Формы
Линии
![Page 28: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/28.jpg)
![Page 29: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/29.jpg)
h�p://konigi.com/book/sketch-‐book/why-‐we-‐sketch
![Page 30: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/30.jpg)
h�p://konigi.com/book/sketch-‐book/why-‐we-‐sketch
![Page 31: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/31.jpg)
h�p://konigi.com/book/sketch-‐book/why-‐we-‐sketch
![Page 32: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/32.jpg)
Пригодится это мне.
![Page 33: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/33.jpg)
Пример: iPhone приложение органайзер дел для свадьбы
![Page 34: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/34.jpg)
![Page 35: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/35.jpg)
![Page 36: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/36.jpg)
![Page 37: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/37.jpg)
![Page 38: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/38.jpg)
![Page 39: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/39.jpg)
Почти все понял!..
![Page 40: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/40.jpg)
Что такое закон сохранения сложности Теслера?
![Page 41: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/41.jpg)
Закон сохранения сложности Теслера: каждое приложение имеет неуменьшаемый коэффициент сложности. Вопрос только в том, кого это касается в большей степени т.е. программу легко разработать но сложно использовать, либо наоборот. h�p://habrahabr.ru/post/130389/
![Page 42: О дизайне интерфейсов для HR-IT CLUB](https://reader034.fdocuments.net/reader034/viewer/2022042614/559c108f1a28abb1398b47ca/html5/thumbnails/42.jpg)
Александр Лисовский Cofounder & CEO at ZZ Photo
UX/UI designer
[email protected] facebook.com/alexlisovsky, pinterest.com/alexlisovsky,