LECTURE NOTES

ISYS6308 – USER EXPERIENCE

Week 07
Site Maps and Task Flows
 Learning Outcomes :

LO4. Menerapkan prinsip-prinsip perancangan prototipe pada desain UX

Learning Objective :
a. Menjelaskan unsur-unsur dasar dari site maps dan task flows.
b. Menjelaskan site maps maju dan bagaimana melaksanakan
c. Menjelaskan task flows alat pemodelan.
d. membuat Site Maps dan Task Flows untuk proyek UX

Outline Materi :
1. Basic Elements
2. Site Map
3. Task Flows
4. Swimlanes

ISYS6209 – USER EXPERIENCE

 WEEK 07
S ITE M APS AND T ASK F LOWS

Site maps berguna untuk membantu mengidentifikasi struktur situs web dan
aplikasi. Yang merupakan hierarki dan koneksi yang memungkinkan audiens untuk
memperoleh pemahaman di mana pengguna bisa mencari konten. Task flows
selanjutnya mengidentifikasi berbagai kursus dari tindakan sehingga pengguna
dapat menelusuri kedalam bagian dari situs. Ketika task flow dan site map
digunakan bersama-sama, maka dapat memberikan gambaran yang jelas pada
pengguna tentang struktur konten dan bagaimana pengguna dapat menavigasinya.

Gambar 1. A site map for a basic Web site with blog functionality

Task flows mengidentifikasi jalur atau proses yang akan diambil pengguna ketika
menelusuri melalui situs Anda Web atau aplikasi. Meskipun site maps dan taks
flow terlihat mirip pada awalnya, dua jenis diagram bertujuan berbeda: Sebuah site
maps memberitahu Anda hirarki visual tata letak situs atau aplikasi, sementara task
flow memberikan rincian pilihan pengguna 'dan jalur yang akan ditempuh.

Gambar 2. A basic task flow showing the path for a user depending on login status

TOOLS
1. Microsoft Visio (http://office.microsoft.com/visio)
2. Axure RP Pro (www.axure.com)
3. OmniGraffle (www.omnigroup.com/applications/OmniGraffle)
4. Adobe InDesign (www.adobe.com/products/indesign)
5. Adobe Illustrator (www.adobe.com/products/illustrator)
6. Microsoft PowerPoint (http://office.microsoft.com/powerpoint)
7. OpenOffice Draw (www.openoffice.org)

Week 07
Site Maps and Task Flows ©BDW 3 | 13
 8. HTML
9. Blueprint CSS (www.blueprintcss.org)

1. Basic Elements
Yang paling dasar dari elemen-elemen dalam program gambar adalah menciptakan
SITE MAPS dan TUGAS ARUS. Untuk memastikan bahwa kreasi dapat dengan
mudah diinterpretasikan oleh khalayak luas, yang terbaik adalah menggunakan
bentuk standar.

PAGE
Menurut Jesse James Garrett, halaman adalah "unit dasar dari UX di Web. Ada
sejumlah cara untuk menggambar halaman ini, tapi yang paling sederhana, paling
umum digunakan adalah format yang polos

Gambar 3. Page element from Jesse James Garrett’s

PAGESTACK
Sebuah pagestack mewakili beberapa halaman dari isi yang serupa. Cara mudah
untuk memahami pagestacks adalah memikirkan konten dinamis, seperti halaman
blog dibuat menggunakan sistem penerbitan. Halaman ini dirancang sekali dan
berada dalam template desain, tetapi memiliki kemampuan untuk mengklik banyak
halaman yang berbeda.

Gambar 4. Pagestack element from Jesse James Garrett’s

DECISION POINT
Decision point digunakan untuk menunjukkan pilihan keputusan atas sebuah
pertanyaan. Jawaban untuk pertanyaan itu akan menentukan halaman yang akan
ditampilkan.

ISYS6209 – USER EXPERIENCE

 Gambar 5. Decision point element from Jesse James Garrett’s

CONNECTORS AND ARROWS

Konektor dan panah digunakan untuk menunjukkan gerakan atau kemajuan antara
halaman, pagestacks, poin keputusan, dan sebagainya. Konektor umumnya muncul
di mana ada panggilan untuk bertindak dari satu halaman ke halaman lain. Sebagai
contoh, link ke halaman Tentang Kami dari Home page bisa menjadi penghubung
antara dua halaman. Panah (Gambar 6) menunjukkan "downstream". Konektor
dengan crossbar dapat digunakan untuk mengidentifikasi ketika gerakan kembali
ke halaman asal "upstream"

Gambar 6. Connector and arrow elements from Jesse James Garrett’s

CONDITIONS
Dashed Line adalah cara yang cukup umum untuk menampilkan kondisi. Hal ini
dapat muncul dalam site maps, task flow, dan pekerjaan lain nya. dapat
menggunakan garis putus-putus sebagai konektor (Gambar 7) atau sebagai sebuah
kotak di sekitar area untuk menyoroti bahwa koneksi ke halaman-atau seluruh
bagian dari halaman-yang bersyarat didasarkan pada beberapa tindakan atau
peristiwa lain.

Gambar 7. Condition element from Jesse James Garrett’s

2. Site Map

ISYS6209 – USER EXPERIENCE

Sebuah sistem penomoran pada Site Map memungkinkan dokumentasi lainnya
untuk melakukan sinkronisasi antar Sistem penomoran dengan dokumen lain,
seperti:
1. Matriks konten, Pencipta konten dapat memetakan copy dan konten lainnya
ke halaman tertentu (dan elemen tertentu dalam gambar rangka, lebih pada
nanti).
2. Task Flow, Task Flow dapat menggunakan sistem penomoran yang sama
untuk menunjukkan bagaimana pengguna akan melanjutkan melalui halaman
tugas tertentu.
3. Wireframes, Halaman-halaman wireframes harus berbagi sistem penomoran
yang sama seperti halaman di site map untuk memberikan hubungan yang
jelas antara dua dokumen.
4. Desain visual. Desainer Visual bisa sinkronisasi halaman desain dan elemen
ke halaman tertentu di site map. Hal ini memungkinkan mereka untuk
penyerahan desain mereka kepada pengembang.
5. Dokumen jaminan kualitas. Tim jaminan kualitas mungkin menulis skrip
pengujian yang didedikasikan untuk halaman tertentu atau halaman di site
map.

SIMPLE SITE MAPS

Halaman diidentifikasi untuk website ini adalah:
1. rumah
2. blog
3. tentang
4. Sampel kerja
5. kontak
site map sederhana menggabungkan unsur-unsur inti dari kosa kata visual dan
mempertahankan gaya profesional dan penampilan. Yang paling penting,
memberikan gambaran yang sangat jelas tentang navigasi, halaman, dan kondisi
yang tersedia untuk pengguna dari situs web.

ADVANCED SITE MAPS

Site maps sederhana umumnya dapat muat pada satu lembar kertas dan
kemungkinan besar itu terlihat seperti bagan organisasi. Site maps yang lebih
kompleks dapat diperluas ke beberapa halaman.
Ketika membuat Site maps lanjutan atau website skala yang lebih besar dan
aplikasi, salah satu pendekatan adalah dengan menggunakan halaman pertama
untuk mengidentifikasi langkah-langkah yang diperlukan untuk mencapai halaman
muka situs. Selain itu, harus mengidentifikasi semua halaman tingkat atas, elemen
navigasi global, dan elemen footer.
Hal ini memungkinkan untuk menunjukkan gambaran tingkat tinggi yang sangat
dari situs di depan dan memberikan tim dan klien dengan gambaran yang jelas dari
proyek.

ISYS6209 – USER EXPERIENCE

 Halaman pertama juga merupakan tempat yang tepat untuk memasukkan legenda
atau kunci untuk membantu dalam membaca site maps (Gambar 8). Tim dan klien
akan membutuhkan langkah ini

Gambar 8. Advanced site map home page view

3. Task Flows
Task Flows adalah diagram yang mengidentifikasi alur proses pengguna atau
sistem melalui website atau aplikasi.
Kegunaan task flow :
1. Ketika digunakan bersama dengan site maps maka dapat menunjukkan
bagaimana pengguna membuka halaman dengan tertentu dari informasi yang
ditampilkan.
2. Kadang-kadang digunakan untuk menunjukkan bagaimana pengguna
(persona) melintasi sebuah situs web dan apa persona yang akan dilihat
berdasarkan model pribadinya.
3. Juga dapat menggunakan task flow untuk mengidentifikasi proses kompleks
yang perlu dipahami dengan jelas sebelum proyek tersebut dikirim ke tim
pengembangan.
4. Mungkin tidak menggunakan tugas task flow pada setiap proyek, dan
mungkin tidak selalu berakhir sebagai produk pekerjaan, tetapi merupakan
ide yang baik untuk menggunakannya walaupn hanya dalam sketsa pensil
dalam format-kertas untuk keuntungan sendiri.

ISYS6209 – USER EXPERIENCE

Gambar 9. This task flow identifies how a system displays information to a user
based on the responses to multiple conditions

Penggunaan kasus untuk skenario yang ditunjukkan pada Gambar.9 akan terlihat
seperti ini:
1. Sistem menampilkan daftar proyek
2. Pengguna memilih sebuah proyek
3. Sistem menampilkan informasi proyek dasar, dalam mode Write
4. Pengguna perubahan status proyek untuk ditutup
5. Pemeriksaan sistem untuk tugas-tugas yang tertunda
a. jika ada tugas yang tertunda, sistem menampilkan pemberitahuan
kesalahan
b. jika tidak ada tugas yang tertunda lanjut
6. Pemeriksaan sistem untuk pembayaran tertunda
a. jika ada pembayaran tertunda, sistem menampilkan pemberitahuan
kesalahan
b. jika tidak ada pembayaran yang tertunda lanjut

ISYS6209 – USER EXPERIENCE

 7. Sistem menampilkan halaman ringkasan

Gambar 10. Task flow used to demonstrate the path of a user through the phases of
a purchase process

Task flow pada gambar menggambarkan urutan informasi yang ditampilkan

kepada pengguna berdasarkan apakah berbagai kondisi dari kasus penggunaan
terpenuhi. Jika salah satu pertanyaan di tengah ("pending tugas?" atau "pending
permintaan pembayaran?") dijawab dengan ya, sistem menampilkan
pemberitahuan error, berpotensi memberikan informasi tambahan untuk membantu
pengguna menyelesaikan tugas-tugas yang diperlukan sebelum membuat maju
kemajuan.

ISYS6209 – USER EXPERIENCE

 Jika kedua kondisi menjawab tidak, sistem menyediakan pengguna dengan
tampilan yang mengidentifikasi keberhasilan. Task flow ditunjukkan pada
gambar.10 menunjukkan jalan yang pengguna bisa mengambil dari aplikasi
kalender melalui sebuah situs perjalanan-belanja.
Aliran tugas adalah tingkat yang sangat tinggi dalam hal mengidentifikasi tiga jalur
yang sangat berbeda yang memerlukan pengujian oleh pengguna untuk
memastikan bahwa aliran rinci untuk setiap jalur memenuhi kebutuhan pengguna.

4. Swimlanes
James Melzer (www.jamesmelzer.com), UX memimpin di EightShapes
(www.eightshapes.com), telah menciptakan sejumlah diagram task flow. Diagram
ditunjukkan pada Gambar.11 menunjukkan task flow untuk menunjukkan
"swimlanes" tindakan, pemberitahuan, dan seterusnya dalam suatu proses yang
memiliki banyak peristiwa yang terjadi pada saat yang sama-dengan proyek dengan
pendekatan tradisional sebaliknya, James dieksplorasi memperluas aliran tugas
dasar untuk mencakup semua berbagai langkah dan tindakan yang terjadi dalam
format yang jauh lebih mudah untuk memahami.

Gambar 11. This swimlanes diagram is an example of expanding task flows to

illustrate complex scenarios with multiple actions in many places. Courtesy of
James Melzer

James menjelaskan proyek dan swimlanes sebagai berikut:

ISYS6209 – USER EXPERIENCE

1. Sistem ini memungkinkan orang mengelola informasi tentang bangunan
yang mereka miliki.
2. Ekstensi ini akan memungkinkan mitra jasa bangunan untuk menyediakan
sistem-ke-sistem data atas nama pelanggan mereka, mengurangi entri data
yang diperlukan dari pemilik.
3. Proyek ini memiliki tiga bagian: mitra mengkonfigurasi presentasi dan
operasi layanan data, pelanggan mendaftar dan menggunakan layanan data
mitra, dan manajemen data mitra yang sedang berlangsung dan pemecahan
masalah di ujung belakang.
4. Kami berencana keluar ekstensi besar sistem yang ada. Kami tahu sejak awal
bahwa hampir semua skenario layanan yang terlibat beberapa pengguna dan
beberapa sistem.
5. Ada sejumlah pemberitahuan, dan banyak proses yang asynchronous.
6. Diagram ini membantu kami mengidentifikasi, desain, dan menjelaskan
skenario layanan yang dibutuhkan untuk proyek tersebut.
7. dalam versi lengkap dari produk kerja ini, kami benar-benar memiliki
wireframes rinci diatur di bawah arus dalam diagram ini.
8. Semuanya tertutup dinding. setelah kami berada cukup percaya diri dalam
konsep desain, kami cincang itu menjadi spesifikasi multipage lebih
tradisional.

ISYS6209 – USER EXPERIENCE

 S IMPULAN

1. Site maps adalah model konten sebuah website yang dirancang untuk membantu
pengguna dan mesin pencari menavigasi situs. Sebuah site map dapat menjadi
daftar hirarkis halaman berdasarkan topik, bagan organisasi, atau dokumen XML
yang menyediakan instruksi untuk mesin pencari
2. Task flows adalah alat untuk membantu kita berpikir melalui desain sebelum fitur
sebenarnya dikembangkan. Mereka memungkinkan kita untuk menyisipkan
pengguna ke dalam aliran aplikasi dan menentukan apakah model konseptual
disetujui oleh pengguna
3. Diagram swimlane merupakan elemen visual yang digunakan dalam diagram
aliran proses, atau diagram alur, yang secara visual membedakan pembagian kerja
dan tanggung jawab untuk sub-proses dari proses bisnis. Swimlane dapat diatur
baik secara horisontal maupun vertikal.

ISYS6209 – USER EXPERIENCE

 DAFTAR P USTAKA

Textbooks
Russ Unger, Carolyn Chandler (2012). A Project Guide to UX Design: For User
Experience Designers in the Field or in the Making. New Riders
Publishing Thousand Oaks, ISBN-13: 978-0321607379.

Support Resource:
http://www.uxbooth.com/articles/complete-beginners-guide-to-content-strategy/

ISYS6209 – USER EXPERIENCE