chapter 5
interaction design basics
what is design?
Desain biasa diterjemahkan sebagai seni terapan, arsitektur, dan berbagai
pencapaian kreatif lainnya. Dalam sebuah kalimat, kata "desain" bisa
digunakan, baik sebagai kata benda maupun kata kerja. Sebagai kata kerja,
"desain" memiliki arti "proses untuk membuat dan menciptakan objek baru".
Sebagai kata benda, "desain" digunakan untuk menyebut hasil akhir dari
sebuah proses kreatif, baik itu berwujud sebuah rencana, proposal, atau
berbentuk benda nyata.
what is design?
UX design adalah metode desain untuk membangun sebuah produk yang tidak
membuat user kebingungan saat menggunakannya. Istilah lainnya, UX berarti
sebuah cara agar user atau pengguna mudah menggunakan produk tersebut.
Interaction design adalah salah satu elemen penting yang ada dalam payung
besar user experience (UX).
Interaction design difokuskan pada saat pengguna berinteraksi dengan
produk yang bertujuan untuk meningkatkan pengalaman interaktif pengguna.
Tujuan dari interaction design sendiri adalah untuk menciptakan produk yang
memungkinkan pengguna mendapatkan apa yang diinginkannya dengan cara
terbaik.
what is design?
achieving goals within constraints
goals - purpose
who is it for, why do they want it
constraints
materials, platforms
golden rule of design
understand your materials
for Human–Computer Interaction
understand your materials
understand computers
limitations, capacities, tools, platforms
understand people
psychological, social aspects
human error
and their interaction …
interaction design basics
design:
what it is, interventions, goals, constraints
the design process
what happens when
users
who they are, what they are like …
scenarios
rich stories of design
navigation
finding your way around a system
iteration and prototypes
never get it right first time!
interactions and
interventions
design interactions not just interfaces
not just the immediate interaction
e.g. stapler in office – technology changes interaction style
manual: write, print, staple, write, print, staple, …
electric: write, print, write, print, …, staple
designing interventions not just artefacts
not just the system, but also …
documentation, manuals, tutorials
what we say and do as well as what we make
The process of design
scenarios
what is task analysis
wanted guidelines
principles
interviews analysis precise
ethnography specification
design
what is there
vs. dialogue implement
what is wanted notations and deploy
evaluation
prototype
heuristics architectures
documentation
help
Steps …
requirements
what is there and what is wanted …
analysis
ordering and understanding
design
what to do and how to decide
iteration and prototyping
getting it right … and finding what is really needed!
implementation and deployment
making it and getting it out there
Website
website adalah kumpulan halaman web yang dapat
diakses publik, serta saling terkait dan berbagi dengan
sebuah domain. Situs web yang dapat diakses publik
disebut juga sebagai world wide web (www)
Perancangan web
Perancangan web (web design) adalah istilah umum
yang digunakan untuk mencakup bagaimana isi web
konten ditampilkan, (biasanya berupa hypertext atau
hypermedia) yang dikirimkan ke pengguna akhir melalui
World Wide Web, dengan menggunakan sebuah browser
web atau perangkat lunak berbasis web.
Tujuan dari web design adalah untuk membuat
website—sekumpulan konten online termasuk dokumen
dan aplikasi yang berada pada server web / server.
Sebuah website dapat berupa sekumpulan teks, gambar,
suara dan konten lainnya, serta dapat bersifat
Perancang Web
Perancang web atau desainer web (web designer) adalah orang
yang memiliki keahlian menciptakan konten presentasi
(biasanya hypertext atau hypermedia) yang dikirimkan ke
pengguna-akhir melalui World Wide Web, menggunakan Web
browser atau perangkat lunak Web-enabled lain seperti televisi
internet, Microblogging, RSS, dan sebagainya.
Dengan berkembangnya spesialisasi dalam desain komunikasi
dan bidang teknologi informasi, ada kecenderungan kuat untuk
menarik garis yang jelas antara web design khusus untuk
halaman web dan pengembangan web secara keseluruhan dari
semua layanan berbasis web.
Jenis-Jenis Layout Website
Layout atau tata letak (dalam bahasa indonesia)
dibutuhkan untuk mengatur bagaimana isi sebuah
konten website. Jenis-jenis tata letak website antara
lain:
• Fixed Layout
• Liquid Layout
• Responsive Layout
Website Berdasarkan Sifat
Website Statis
Website Dinamis
Jenis-JenisWebsite
Berdasarkan Platform
CMS
Website Builder
HTML dan CSS
Website Berdasarkan Fungsi
Website Social Media • Online Learning
Website Search Engines • Photo Sharing
• Community / Forum
Web ECommerce
• Social Bookmarking
Web News / Portal • Banking
Web Blog • File Sharing
• Short URL
Web Company Profile / Perusahaan
• Encyclopedia
Website Pribadi / Personal
Crowdfunding
Jenis Website
Kesalahan yang kerap dilakukan ketika membuat desain
web adalah langsung masuk ke pengerjaan desain
desain yang telah dikerjakan ternyata tidak sesuai yang
diinginkan
Desain Web
Kesalahan yang kerap dilakukan ketika membuat desain
web adalah langsung masuk ke pengerjaan desain
desain yang telah dikerjakan ternyata tidak sesuai yang
diinginkan
Desain Web
1. Menentukan Tujuan
2. Menentukan Platform
3. Mengamati Tren Desain Web Terbaru
4. Mempelajari Desain Website Kompetitor
5. Merancang Layout
6. Memperhatikan Hirarki Visual
7. Berikan Ruang Kosong
8. Merancang Navigasi
9. Mengatur Grid
10. Pemilihan Warna
11. Pemilihan Font
12. Gunakan Gambar Terbaik
13. Membuat Prototype
14. Melakukan Pengujian
15. Launch Website
Desain Web
1. [Link]
2. Olusta
3. BroPulsa
Jenis Jenis Aplikasi di Smartphone
Communication Application
Social Application
Bisnis Application
Entertainment Application
Game Application
Tools Application
Photography Application
Education Application
News and Magazines Application
Fungsi Aplikasi Mobile
Mempersingkat Waktu
Bisa Digunakan Kapan Saja dan Dimana Saja
Terhubung Dengan Banyak Media Sosial (sharing
informasi)
Manajemen Usaha Lebih Optimal
Membantu Manajemen Pelanggan
Jenis – jenis Aplikasi Mobile
berdasarkan Pengembangan
1. Aplikasi Native
2. Aplikasi web
3. Aplikasi Hybrid
4. Games
Aplikasi Native
Aplikasi ini di buat dan ditanam (install) langsung didalam
device/Gadget kita, baik untuk platform aplikasi mobile
android ataupun aplikasi mobile iOS, aplikasi mobile ini
menggunakan bahasa pemrograman yang selayaknya digunakan
untuk membuat aplikasi tersebut. Misalnya, untuk membuat
aplikasi Android menggunakan Java dan SDK milik Android,
aplikasi iOS menggunakan Objective-C dan SDK iOS
Aplikasi web
Aplikasi mobile Dibuat dan dikembangkan dengan
menggunakan bahasa pemrograman berbasis web, aplikasi
mobile jenis web ini dijalankan menggunakan browser yang ada
di handphone atau device/Gadget kita, menggunakan bahasa
pemrograman html5, php, ataupun ASP beserta dengan
beberapa komponen pendukungnya, misalkan database, css,
javascript, dll, serta penyimpanan data langsung ke database
server
Aplikasi Hybrid
Aplikasi mobile yang dibuat dan ditanam (install) langsung
didalam device, menggunakan bahasa pemrograman website (
HTML5 dan PHP) yang digabung dengan bahasa pemrograman
yang selayaknya digunakan utuk membuat aplikasi pada device
yang dituju. Maksud dari “menggabung bahasa pemrograman”
disini adalah, aplikasi inti dibuat dengan menggunakan bahasa
pemrograman web, sedangkan untuk beberapa fitur yang tidak
bisa dijalankan menggunakan bahasa pemrograman web, akan
ditulis dalam bahasa pemrograman yang sesuai dengan device
tujuan
Games
Aplikasi game berbasis mobile yang dikembangkan untuk suatu
platform tertentu baik yang berbasis android ataupun berbasis
iOS, jenis aplikasi game ini bisa berupa aplikasi mobile native,
atau dengan menggunakan pemrograman web dengan basis
HTML5 dan PHP, atau bisa juga jenis aplikasi mobile hybrid.
Struktur Navigasi Website
Struktur navigasi website adalah susunan hierarki menu
pada website yang menggambarkan isi dari keseluruhan
website.
Struktur navigasi akan menggambarkan alur dari suatu
website yang saling terhubung satu dan lain halaman
dengan internal link.
Struktur satu website dengan website lain pastinya akan
berbeda, tergantung dari kebutuhan website tersebut.
Jenis Navigasi Website
Navigasi Global
Navigasi Hirarki
Navigasi Linier
Navigasi Campuran
Navigasi Lokal
Navigasi Global
Jenis navigasi ini memiliki menu yang dibuat sama
dengan setiap halaman.
Biasanya menu pada bagian header dan footer selalu
sama, yang membedakan terletak pada bagian
body/content artikelnya.
Jadi saat orang membuka suatu halaman dan ingin
kembali ke menu awal, tinggal klik saja pada bagian
logo atau kategori utama website.
Navigasi Hirarki
Struktur navigasi hirarki paling banyak digunakan pada website berita
yang memiliki banyak sub kategori dari kategori utama.
kategori “Olahraga”, didalamnya dibedakan lagi menjadi Sepak Bola,
Basket, Bulu Tangkis, MotoGP, Sepeda dsb.
menu untuk kembali ke menu utama/halaman home.
Navigasi Linier
Sistem navigasi linier merupakan navigasi yang terbilang simple, jadi
ada satu garis dari home menuju ke menu website.
Model navigasi seperti ini akan memudahkan para pengunjung website
dan internal link bisa teratur.
Navigasi Campuran
Struktur navigasi keempat adalah model campuran,
tidak ada aturan navigasi pada jenis ini.
Navigasi ini merupakan gabungan dari navigasi-navigasi
sebelumnya.
Navigasi Lokal
Strukturnya lebih ke internal link antar halaman, jadi jika ada
bahasan yang kurang detail atau masih berhubungan akan
diberikan internal link yang lebih lengkap.
Model navigasi seperti ini banyak ditemui pada website
majalah, blog pribadi dan sejenisnya.
Keuntungan Menggunakan
Struktur Website yang Bagus
User Experience meningkat
Bagus untuk SEO, Internal link akan membuat halaman menjadi lebih
mudah ditemukan oleh Google.
Crawling lebih cepat , robot crawler akan lebih mudah menemukan
halaman baru sehingga lebih cepat terindeks.
Durasi kunjungan meningkat
Mendapatkan sitelink
Membuat Navigasi Website
Buat plan desain
Homepage paling atas
Gunakan breadcrumbs (posisi dimana)
Gunakan taksonomi
Cek broken link
Sistem Navigasi Aplikasi
Seluler
Navigasi seluler yang baik akan meningkatkan fungsi
kegunaan dari seluruh produk, membantu pengguna
menikmati semua fitur.
Navigasi yang buruk akan mempersulit pengguna untuk
menemukan hal yang dicari, sehingga kecil
kemungkinannya bahwa pengguna akan
mempertimbangkan pembelian atau penggunaan jasa
yang diberikan.
Sistem Navigasi Aplikasi
Seluler
Sistem Navigasi Haruslah Jelas & Intuitif
Penempatan Jari Dengan Baik
Konten Mudah Dibaca
Hindari Penempatan Elemen Yang Berantakan & Terapkan Hierarki Visual
Sistem Navigasi Aplikasi
Seluler
Sistem Navigasi Haruslah Jelas & Intuitif
Penempatan Jari Dengan Baik
Konten Mudah Dibaca
Hindari Penempatan Elemen Yang Berantakan & Terapkan
Hierarki Visual