Step13

Organize and Layout
Windows and Pages
•Andi Dynawavy N
•Febriani Dwiprianti
•Mutia Hafilizara
•Resti Gustianingsih
•Tria Agustina
Kelompok 13
Step 13
1 kelompok 13

Topik Utama Pembahasan
• Mengorganisasi dan menata tampilan grafik maupun web untuk mendukung
pemahaman informasi yang lebih cepat dan akurat dan eksekusi kontrol .
• Mengorganisasi tampilan agar user mudah memahami dan efisiensi.
• Membuat pengelompokan.
• Menyediakan keselarasan dan keseimbangan.
2 kelompok 13

• Menyajikan jumlah informasi yang tepat pada setiap layar
Jika terlalu sedikit tidak efisien
 Jika terlalu banyak maka akan membingungkan user
• Jika memungkinkan, tampilkan semua informasi yang diperlukan
pada satu layar
Jumlah Informasi
General Guideline
3 kelompok 13

Pengorganisasian
Tuliskan perintah yang :
• Logis dan sequential
• Seirama, mengarahkan mata user menelusuri display tampilan
• Mendukung pergerakan secara natural
• Meminimalisir penggunaan pointer dan jarak perpindahan mata
General Guideline
4 kelompok 13

Penempatan
Control
• Posisikan control yang sangat penting dan sering digunakan di
bagian kiri atas
• Atur aliran dari atas ke bawah dan kiri ke kanan
• Jika satu kontrol berpengatuh pada yang lain maka tombol
enable harus berada di atas atau di sebelah kiri kontrol yang
akan di enable
• Letakkan tombol perintah yang mempengaruhi seluruh
windows secara horizontal lalu letakkan di posisi paling bawah
windows
General Guideline
5 kelompok 13

Navigasi
• Aliran interaksi harus :
Jika memungkinkan, meminimalkan pergerakan kursor
Meminimalkan perpindahan tangan user dari mouse dan
keyboard
• Membantu user dalam menavigasi layar dengan :
Menyelaraskan element
Mengelompokkan element
Menggunakan line board
General Guideline
6 kelompok 13

Estetika
• Menyediakan susunan secara visual dapat melalui :
Penggunaan spasi
Keseimbangan
Pengelompokan
Keselarasan element
General Guideline
7 kelompok 13

Kesalahan Visual
• Cara yang digunakan untuk menghindari kesalahan visual :
Mempertahankan tingkat kerapatan layar yang rendah
Menjaga kekhasan element
General Guideline
8 kelompok 13

Fokus dan
Penekanan
Konsistensi
• Memberikan penekanan visual untuk element layar yang
sangat penting pada data atau informasi
• Secara sequential, arahkan perhatian pada hal yang :
Dibutuhkan
Penting
Sekunder
Lingkungan luar
• Konsisten dengan :
Pengalaman seseorang dan kebudayaan
Sistem secara internal
Sistem secara eksternal
General Guideline
9 kelompok 13

Organization Guidelines
General
Memberikan pengelompokan pada elemen yang
saling berhubungan.
White Space
- Memberikan pemisah dengan menggunakan
ruang kosong
- Menyisakan space yang cukup antara groupings
dan windows border
- Space antara kelompok seharusnya lebih besar
dari space antara field pada suatu groupings
10 kelompok 13

Heading
• Memberikan judul bagian dan sub judul untuk
beberapa kontrol.
• Memberikan judul yang bermakna dan ringkas untuk
memberi gambaran dari grup yang berhubungan.
• Meningkatkan pengelompokan dengan membuat
border di sekitar contoh dalam satu grup
• Border control seharusnya berbeda secara visual
dari border grup
• Jangan gunakan border untuk tombol perintah
• Jangan gunakan border untuk kontrol tunggal
Borders
11 kelompok 13

(Creating Grouping)
Groupings
Grouping using White
Space
12 kelompok 13

Grouping with Section
Headings
(Creating Grouping)
13 kelompok 13

Examples of vertically arrayed controls
without and with borders.
(Creating Grouping)
14 kelompok 13

Examples of horizontally arrayed controls without
and with borders.
(Creating Grouping)
15 kelompok 13

- Membuat batas kontrol dalam satu grup
- Buat Spasi :
- Vertikal, dari judul ke kontrol diberi
satu line space ke bawah
- Horizontal, dari judul minimal empat
karakter ke kontrol
- Judul section berada di garis atas dan
jaraknya dua karakter dari kiri garis.
Section Borders
Grouping of sections using borders.
(Creating Grouping)
16 kelompok 13

Differentiable control and section
borders.
Kinds of borders to avoid using.
(Creating Grouping)
17 kelompok 13

Dependent Controls
• Posisi kontrol :
- bisa dikanan kontrol yang berhubungan
- bisa dibawah kontrol yang berhubungan.
18 kelompok 13

Either:
— apabila belum diisi maka kontrol selanjutnya menjadi tidak aktif dan berwarna
abu-abu
— kontrol tidak akan aktif apabila kontrol sebelumnya belum di set.
Dependent Controls
19 kelompok 13

Aligning Screen Elements
Minimalkan alignment point pada window
•vertikal .
•Horizontal.
20 kelompok 13

Radio buttons/check boxes:
Vertical Orientation
dan Vertical
Allignment
21 kelompok 13

List Boxes Text Boxes
22 kelompok 13

Drop Down/Pop-up Box Mixed Controls
23 kelompok 13

Multi Column Control
24 kelompok 13

Radio buttons/check boxes
Horizontal
orientation dan
Vertical Alignment
25 kelompok 13

Text boxes:
Right align data numerik
26 kelompok 13

Mixed text box dan selection control:
27 kelompok 13

Barisan radio button secara horizontal yang kurang adanya differensiasi item
Barisan control item secara horizontal yang tidak konsisten akan spasi orientasi
vertikal yang salah
28 kelompok 13

Barisan control item secara horizontal yang memiliki keselarasan dan kekhasan
Barisan control item secara horizontal menggunakan border untuk meningkatkan
readability
29 kelompok 13

Orientasi Text Box secara
vertikal
30 kelompok 13

Horizontal
Alignment
31 kelompok 13

Section Alignment
32 kelompok 13

Balancing Elements
General:
balancing dengan:
• Seimbangkan penembatan control.
• berikan align border sebisa mungkin.
Individual control borders:
Jika lebih dari satu control dengan border tegabung
dalam satu kolom layar:
• Align control tersebut mengikuti petunjuk
multiple
control alignment.
•Align left and right borders semua group.
• Tetapkan posisi batas kiri dan kanan sesuai
dengan
jarak yang dierlukan untuk elemen terluas dalam
kelompok.
33 kelompok 13

Dengan multiple groupings dan multiple columns, balancing dilakukan dengan cara:
• Membagi lebar kolom sama besar.
• membagi tinggi kolom sama besar.
34 kelompok 13

Section borders:
Jika lebih dari satu section dengan
border tergabung dalam satu kolom
maka:
• Align kiri dan kanan border dari semua
group
• Atur posisi left and right border
berdasarkan kebutuhan spasi dari lebar
elemen dalam group.
35 kelompok 13

Window Guidelines
Organization:
•Atur windows untuk mendukung user tasks
•Sediakan informasi yang terkait sebisa mungkin dalam satu window.
•Gunakan primary windows untuk :
• Memulai interaksi dan menyediakan top level konteks untuk window yang
terkait.
• Menampilkan interaksi utama.
Number:
• Minimalkan jumlah jendela yang diperlukan untuk mencapai tujuan
Size:
•Sediakan window yang cukup besar
•Jika window terlalu besar?
36 kelompok 13

Web Page Guidelines
37 kelompok 13

■ Secara umum sajikan layout yang
• Efisien
• Logis
• Konsisten
• Jelas (Self-explanatory)
• Nyaman dilihat (Scannable),
saat me-layout, temukan keseimbangan yang tepat diantara
• Informasi tekstual
• Grafik atau gambar
• Link
■ Layout Grid:
— Buat dan gunakan kerangka layout
■ Elemen-Elemennya:
— Tidak lebih dari tujuh unsur yang berbeda setiap halaman
Web Page Guidelines
38 kelompok 13

Ukuran
— Minimalkan panjang halaman
— Hindari page break
— Abaikan scrolling halaman secara
horizontal
Organisasi
— Tempatkan informasi penting di
bagian paling atas sehingga
selalu dilihat ketika halaman dibuka.
— Posisikan elemen-elemen sesuai
dengan urutan kepentingannya
— Kurangi kompleksitas grafis atau
gambar dan kepadatan tekstual
Web Page Guidelines
39 kelompok 13

Format
— Ada ruang kosong (white space)
yang cukup
• Minimal 30%.
— Panjang teksnya
• Maksimal 52 karakter
— Teks dan gambar yang
berkaitan tetap dekat satu sama
lain
— Spasi horizontal antar konten
harus cukup
— Garis Horizontal untuk
mengindikasikan akhir dari
halaman
Lain-lain
— Frame
— Perubahan struktur dan
organisasi
Web Page Guidelines
40 kelompok 13

“Lakukan layouting dengan benar, karena jika hanya mengisi kekosongan hasilnya
tidak akan bagus.”
Web Page Guidelines
41 kelompok 13

Kerangka Layout (Grid Layout)
Hal-hal yang perlu diperhatikan untuk membuat grid atau kerangka layout:
 Kumpulkan konten sampel yang mewakili dari isi halaman situs. Contoh:
navigasi halaman, halaman konten, halaman yang sederhana, dan halaman
yang kompleks.
 Coba susun gambar atau sketsa pola organisasi pada halaman sampel
dengan berbagai susunan ke semua jenis halaman.
 Ikuti semua panduan tata letak (layout) guidelines lalu kembangkan standar
organisasi halaman web tersebut.
 Sebisa mungkin pertahankan konsistensi antar halaman, buat desain grid
untuk semua halaman.
 Sisipkan konten seperti navigasi, teks, dan grafis di setiap halaman.
42 kelompok 13

Contoh Kerangka layout (Grid Layout)
43 kelompok 13

Halaman Utama (Home Page)
Biasa dikenal dengan halaman beranda.
 Batasi hanya satu halaman saja
 Identifikasi dengan jelas konten dan tujuan dari situs web tersebut
 Elemen-elemennya meliputi:
— Ikhtisar situs tersebut
— Link navigasi ke sebagian besar situs atau ke bagian yang utamanya saja
— Beberapa konten yang berguna
44 kelompok 13

Komponen Tujuan Frekuensi
Halaman
Letak
Judul Halaman Setiap
halaman
Atas
Bar Navigasi Setiap
halaman
Atas
Daftar Isi Untuk daftar
isi halaman
Bisa lebih dari
2-3 layar
Atas
Identitas Situs
(misal: Logo
Perusahaan)
Untuk
mengidentifika
si pemilik
Setiap
halaman
Atas
Fasilitas
Pencari
Untuk
mencari letak
konten yang
menarik
Setiap
halaman
Atas
Komponen halaman web yang memungkinkan:
Elemen-elemen Halaman (1)
45 kelompok 13

Halaman
Letak
Contact Person Untuk menunjukkan
pemilik situs atau
kontak yang dapat
dihubungi
Setiap halaman Footer
Alamat E-mail Untuk meminta
pertanyaan atau
komentar
Fasilitas Komentar Untuk meminta
pertanyaan atau
komentar
Sesuai kebutuhan Footer
Kontak Lainnya Informasi tambahan
untuk meminta
pertanyaan atau
komentar
Sesuai kebutuhan Footer
46 kelompok 13

Halaman
Letak
Informasi Hak Cipta
(Copyright)
Untuk
mengidentifikasi
legal atau tidaknya
kepemilikan
halaman situs.
Tanggal Pembuatan
atau Update
Untuk menunjukkan
keaktualan
informasi
47 kelompok 13

Halaman
Letak
Skip/lewati ke
konten utama
Untuk kemudahan
mengakses
Setiap halaman Atas
Bagian utama
lainnya dari situs
Untuk menunjukkan
keaktualan
informasi
Setiap halaman Atas, Footer, juga di
halaman yang
panjang
Halaman Beranda Untuk kembali ke
halaman beranda
halaman yang
panjang
Halaman Indeks Untuk kembali ke
indeks
halaman yang
panjang
Link:
48 kelompok 13

Halaman
Letak
Peta situs atau
direcktori
Untuk kembali ke
peta situs atau
direktori
halaman yang
panjang
Halaman berikutnya Untuk menuju ke
halaman berikutnya
secara sequence
Setiap halaman (jika
memungkinkan)
Bawah
Halaman
sebelumnya
Untuk menuju ke
halaman
sebelumnya
Setiap halaman (jika
memungkinkan)
Bawah
Link:
49 kelompok 13

1. Keterangan kontrol
yang membingungkan.
2. Deskripsi pilihan tidak
rata kiri .
3. Tidak ada pengelompokan
4. Tidak diurutkan alfabetik
1st
EXAMPLE
51 kelompok 13

1. Keterangan kontrolnya
informatif.
2. Deskrips pilihan rata kiri
3. Pengelompokan
4. Diurutkan secara alfabetik
52 kelompok 13

1. Kesalahan tata letak
text box.
2. Posisi radio button
tidak konsisten.
3. Memberikan informasi
yang salah.
4. Bagian kontrol ada
yang hilang.
2nd
EXAMPLE
53 kelompok 13

1. Pengelompokan.
2. Radio button konsisten.
3. Form kontrol lebih
komunikatif.
4. Semua kontrol terlihat.
54 kelompok 13

8% more complex than the original ones
55 kelompok 13

1. Radio button
2. Text box
3rd
EXAMPLE
3. Posisi button
56 kelompok 13

4th
EXAMPLE
1. Text box.
2. Button
58 kelompok 13

Step13

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (9)

Step13