Banyak kiat yang diberikan oleh praktisi komputer tentang bagaimana merancang user interface dan merancang report yang baik. Salah satunya bisa dilihat di sini. Untuk melengkapi pengetahuan kita tentang perancangan user interface dan perancangan report yang baik, maka kita perlu mengetahui kiat-kiat tersebut.
Maka kali ini masing-masing mahasiswa mengirimkan 2 kiat yang bisa digunakan sebagai pedoman untuk membuat user interface dan report yang baik. Jangan lupa kirimkan juga URL sumbernya.
contoh:
1. enablel keyboard shortcut in your web application
2. …….
source: http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/
Setiap siswa mengirimkan kiat yang berbeda walaupun bisa dari sumber yang sama. Pengirim terdahulu tentu memiliki hak yang lebih.
coLor the WoRLd 
http://ayeepz.blogspot.com/2010/05/prinsip-umum-desain-user-interface.html
-design user interface
User Compatibility, yang bisa berarti kesesuaian tampilan dengan tipikal dari
user. karena berbeda user bisa jadi kebutuhan tampilannya berbeda. misalnya,
jika aplikasi diperuntukkan bagi anak-anak, maka jangan menggunakan istilah
atau tampilan orang dewasa.
b. Product Compatibility, istilah ini mengartikan bahwa produk aplikasi yang
dihasilkan juga harus sesuai. memiliki tampilan yang sama/serupa. baik untuk
user yang awam maupun yang ahli.
c. Task Compatibility, berarti fungsional dari task/tugas yang ada harus sesuai
dengan tampilannya. misal untuk pilihan report, orang akan langsung
mengartikan akan ditampilkan laporan. sehingga tampilan yang ada bukanlah
tipe data (dari sisi pemrogram).
d. Work Flow Compatibility, aplikasi bisa dalam satu tampilan untuk berbagai
pekerjaan.. jika tampilan yang ada hanya untuk satu pekerjaan saja. misal
untuk kirim mail, maka kita harus membuka tampilan tersendiri untuk daftar
alamat.
e. Consistency. Konsisten. Contohnya, jika anda menggunakan istilah save
yang berarti simpan, maka gunakan terus istilah tersebut.
f. Familiarity, Icon disket akan lebih familiar jika digunakan untuk perintah
menyimpan.
g. Simplicity, aplikasi harus menyediakan pilihan default untuk suatu pekerjaan.
h. Direct Manipulation, manipulasi secara langsung. misalnya untuk
mempertebal huruf, cukup dengan ctrl+B.
i. Control, berikan kontrol penuh pada user, tipikal user biasanya tidak mau
terlalu banyak aturan.
85
j. WYSIWYG, What You See Is What You Get, buatlah tampilan mirip seperti
kehidupan nyata user. dan pastikan fungsionalitas yang ada berjalan sesuai
tujuan.
k. Flexibility, tool/alat yang bisa digunakan user. jangan hanya terpaku pada
keyboard atau mouse saja.
l. Responsiveness, tampilan yang dibuat harus ada responnya. misal, yang
sering kita lihat ketika ada tampilan please wait… 68%…
m. Invisible Technology. user tidak penting mengetahui algoritma apa yang
digunakan. Contohnya untuk mengurutkan pengguna tidak perlu mengetahui
algoritma yang digunakan programmer (max sort, bubble sort, quick sort, dst)
n. Robustness, handal. Dapat mengakomodir kesalahan user. jangan malah error,
apalagi sampai crash.
o. Protection, melindungi user dari kesalahan yang umum dilakukan. misalnya
dengan memberikan fitur back atau undo.
p. Ease of Learning. aplikasi. mudah dipelajari.
q. Ease of use, aplikasi harus mudah digunakan
DESAIN USER INTERFACE
1. PRINSIP UMUM DESAIN USER INTERFACE
Deborah J. Mayhew, dengan General Principles Of UI Design, atau Prinsip
Umum Desain User Interface. Ada 17 prinsip yang harus dipahami para perancang
sistem, terutama untuk mendapatkan hasil maksimal dari tampilan yang dibuat.
a. User Compatibility, yang bisa berarti kesesuaian tampilan dengan tipikal dari
user. karena berbeda user bisa jadi kebutuhan tampilannya berbeda. misalnya,
jika aplikasi diperuntukkan bagi anak-anak, maka jangan menggunakan istilah
atau tampilan orang dewasa.
b. Product Compatibility, istilah ini mengartikan bahwa produk aplikasi yang
dihasilkan juga harus sesuai. memiliki tampilan yang sama/serupa. baik untuk
user yang awam maupun yang ahli.
c. Task Compatibility, berarti fungsional dari task/tugas yang ada harus sesuai
dengan tampilannya. misal untuk pilihan report, orang akan langsung
mengartikan akan ditampilkan laporan. sehingga tampilan yang ada bukanlah
tipe data (dari sisi pemrogram).
d. Work Flow Compatibility, aplikasi bisa dalam satu tampilan untuk berbagai
pekerjaan.. jika tampilan yang ada hanya untuk satu pekerjaan saja. misal
untuk kirim mail, maka kita harus membuka tampilan tersendiri untuk daftar
alamat.
e. Consistency. Konsisten. Contohnya, jika anda menggunakan istilah save
yang berarti simpan, maka gunakan terus istilah tersebut.
f. Familiarity, Icon disket akan lebih familiar jika digunakan untuk perintah
menyimpan.
g. Simplicity, aplikasi harus menyediakan pilihan default untuk suatu pekerjaan.
h. Direct Manipulation, manipulasi secara langsung. misalnya untuk
mempertebal huruf, cukup dengan ctrl+B.
i. Control, berikan kontrol penuh pada user, tipikal user biasanya tidak mau
terlalu banyak aturan.
j. WYSIWYG, What You See Is What You Get, buatlah tampilan mirip seperti
kehidupan nyata user. dan pastikan fungsionalitas yang ada berjalan sesuai
tujuan.
k. Flexibility, tool/alat yang bisa digunakan user. jangan hanya terpaku pada
keyboard atau mouse saja.
l. Responsiveness, tampilan yang dibuat harus ada responnya. misal, yang
sering kita lihat ketika ada tampilan please wait… 68%…
m. Invisible Technology. user tidak penting mengetahui algoritma apa yang
digunakan. Contohnya untuk mengurutkan pengguna tidak perlu mengetahui
algoritma yang digunakan programmer (max sort, bubble sort, quick sort, dst)
n. Robustness, handal. Dapat mengakomodir kesalahan user. jangan malah error,
apalagi sampai crash.
o. Protection, melindungi user dari kesalahan yang umum dilakukan. misalnya
dengan memberikan fitur back atau undo.
p. Ease of Learning. aplikasi. mudah dipelajari.
q. Ease of use, aplikasi harus mudah digunakan
2. DESAIN OUTPUT
Output adalah komponen yang paling dapat dilihat dari sistem informasi yang
bekerja/berfungsi. Oleh karena itu, output sering menjadi basis penilaian akhir
manajemen terhadap kesuksesan sebuah sistem.
Salah satu cara untuk menggolongkan output adalah dengan melihat distribusinya
apakah ke dalam atau ke luar perusahaan, dan orang-orang yang membaca dan
menggunakan output.
Internal output digunakan untuk para pemilik dan pengguna sistem dalam
sebuah perusahaan. Output internal mendukung operasi bisnis sehari-hari atau
pengawasan manajemen dan pengambilan keputusan.
Tiga jenis output internal adalah sebagai berikut:
1. Detailed Report, menyajikan informasi dengan sedikit atau tanpa dilakukan
penyaringan atau pembatasan. Contoh daftar seluruh tagihan pelanggan.
2. Summary Report, berisi informasi dari manajer yang tidak perlu diperlihatkan
keseluruhan laporan secara detail. Contoh laporan ringkasan total penjualan
dalam hitungan bulanan dan grafik penjualan per-tahun
86
3. Exception Report, menyaring data sebelum ditunjukkan kepada manajer
sebagai sebuah informasi. Contoh laporan persediaan barang yang hamper
habis.
Eksternal Output bersifat keluar organisasi. Output ini ditujukan kepada
konsumen, pemasok, mitra bisnis dan badan pemerintahan. Output eksternal
menyimpulkan dan melaporkan transaksi bisnis. Contoh faktur, nota pembelian,
jadwal kursus, tiket pesawat, tagihan telepon dan lain sebagainya.
Turnaround Output adalah output eksternal yang akhirnya masuk kembali
ke dalam sistem sebagai input. Contoh tagihan telepon yang hasil pembayaran
pelanggan menjadi inputnya.
a. Petunjuk Desain Output
Berikut adalah hal-hal penting untuk mendesain output:
1. Output dari komputer harus mudah dibaca dan diinterpretasikan :
a. Setiap output harus memiliki judul
b. Setiap output harus diperbaharui dan diberi tanggal
c. Laporan dan layar (screen) harus memiliki bab dan sub bab pada masingmasing
segmen informasinya.
d. Pada output berbasis form, semua bagian harus diberi label/nama yang jelas
e. Pada output berbasis tabel, semua kolom yang digunakan juga harus diberi
nama
f. Karena judul bab, field name dan judul kolom sering mengalami penyingkatan
untuk menghemat tempat, maka laporan harus menyediakan akses untuk
melihat dan menginterpretasikan singkatan tersebut.
g. Hanya informasi yangdibutuhkan saja yang dicetak atau ditampilkan.
h. Agar informasi tersebut dapat digunakan, maka informasi tidak boleh diubah
secara manual
i. Informasi harus tampak seimbang pada laporan atau tampilannya, jangan
terlalu penuh atau tersebar.
j. Para pengguna harus dapat dengan mudah menemukan output tersebut
k. Jargon komputer dan pesan error harus diabaikan dari semua output
2. Timing output komputer adalah penting.
3. Distribusi atau akses ke output komputer harus mencukupi untuk membantu
seluruh pengguna sistem yang relevan.
4. Output komputer harus mudah diterima oleh pengguna sistem yang akan
menerima output.
b. Proses Desain Output
Langkah-langkahnya adalah sebagai berikut:
1. Mengidentifikasi output sistem dan meninjau persyaratan logis
2. Menentukan persyaratan output fisik
Setelah anda memastikan bahwa anda memahami tipe laporan dari output dan
bagaimana output akan digunakan, maka anda perlu menekankan beberapa hal yang
terkait dengan masalah desain:
a. Metode implementasi yang mana yang terbaik untuk melayani output
tersebut? Keputusan-keputusan di bawah ini dutuhkan untuk pengguna sistem:
• Format apa yang paling cocok untuk laporan tersebut? Tabel? Zone?
Grafik? Atau gabungan?
• Jika dibutuhkan printout, anda harus menentukan tipe form atau kertas
yang akan digunakan.
• Pada screen output, anda harus mengetahui batasan peralatan display
pengguna.
• Form image dapat disimpan dan dicetak dengan printer laser modern
b. seberapa sering output dihasilkan? Sesuai permintaan? Per jam? Harian?
Bulanan? Untuk output yang sudah terjadwal, kapan pengguna sistem
membutuhkan laporan?
c. Berapa buah halaman atau lembar dari output yang akan dihasilkan untuk
salinan tunggal dari printed output?
d. Apakah output membutuhkan banyak salinan?Jika ya, berapa banyak?
e. Untuk output yang sudah tercetak, apakah kontrol distribusi sudah
terselesaikan? Untuk output online, kontrol akses harus ditetapkan.
3. Mendesain semua preprinted form. Dokumen eksternal dan turnaround dipisahkan
untuk pertimbangan tertentu karena mereka berisi informasi yang dinilai konstan
dan belum tercetak (preprinted).
4. Mendesign, memvalidasi dan menguji output. Format atau layout sebuah output
secara langsung berpengaruh pada kemudahan pengguna untuk membaca dan
menerjemahkannya. Cara paling baik untuk menyusun format tersebut adalah
dengan membuat sketsa atau dengan membuat contoh dari dokumen atau laporan.
3. DESAIN INPUT
Untuk menginput data ke dalam komputer, analis sistem harus mendesain
dokumen sumber, screen input dan metode serta prosedur untuk memasukkan data ke
dalam komputer (dari konsumen ke form ke staf entry data ke komputer).
Data Caputre adalah identifikasi dan penambahan data baru.
Source document adalah form yang digunakan untuk menyimpan transaksi
perusahaan, khususnya data-data yang ada pada transaksi tersebut.
Data entry adalah suatu proses translasi source data atau dokumen ke dalam format
yang mudah dibaca oleh computer. Ketika komputasi onlikne menjadi kian umum,
maka tanggung jawab data entry sekarang beralih langsung kepada pengguna sistem.
a. Masalah Pengguna Sistem pada Desain Input
Input berasal dari sistem, maka human factor memainkan peranan yang sangat
penting dalam desain input. Input harus dibuat sesederhana mungkin dan didesain
untuk mengurangi kemungkinana kesalahan pemasukan data. Kebutuhan pengguna
sistem harus dipertimbangkan.
Jumlah data yang dimasukkan harus seminimal mungkin, semakin banyak data
yang dimasukkan, semakin besar potensi kesalahan input dan makin lama juga waktu
yang diperlukan untuk menginput data. Jadi, ada berbagai pertimbangan yang perlu
dilakukan pada data yang akan di capture sebagai input. Berikut ini prinsip-prinsip
desain input yang harus diikuti:
• Dapatkan hanya data variabel, jangan memasukkan data konstan. Misalnya
pada input sales order, maka kita membutuhkan part numbner dari seluruh
bagian yang akan dipesan, tetapi kita tidak perlu menginput part descriptions
untuk bagian-bagian tersebut.
• Jangan meng-capture data yang dapat dikalkulasi atau dihitung dengan
menggunakan program komputer.
• Gunakan kode untuk atribut yang tepat.
Jika source document digunakan untuk menangkap data, maka dokumen
tersebut harus mudah digunakan oleh pengguna sistem untuk dilengkapi dan
kemudian dimasukkan ke dalam sistem. Beberapa saran di bawah ini dapat membantu
:
• Masukkan perintah untuk melengkapi form. Ingat bahwa orang tidak suka jika
harus membaca perintah yang dicetak dibalik form.
• Minimalkan jumlah tulisan tangan. Banyaknya orang yang tidak mempunyai
kemampuan menulis indah. Petugas data entry dapat salah membaca data lalu
salah memasukkan data tersabut.
• Data yang akan dimasukkan harus diurutkan terlebih dahulu sehingg dapat
dibaca dari atas ke bawah dan dari kiri ke kanan.
• Jika memungkinkan gunakan desain yang berbasis metapora (input yang mirip
dengan kertas) yang sudah dikenal.
b. Kontrol Internal – Data Editing untuk Input
Kontrol internal merupakan persyaratan yang ada di seluruh sistem berbasis
computer. Control imputer internal menjamin input data pada computer tersebut
akurat dan bahwa sistem tersebut aman terhadap suatu kesalahan incidental dan
penyalahgunaan. Di bawah ini petunjuk control internal yang dianjurkan :
• Jumlah input harus diawasi.
• Perhatian juga harus diberikan untuk memastikan bahwa data tersebut valid.
Terdapat dua tipe kesalahan yang dapat terjadi pada data: kesalahan data entry
dan penyimpanan data invalid oleh pengguna sistem. Kesalahan pemasukan
data terdiri dari kesalahan meng-copy, pemindahan posisi (mengetik 123
dengan 123) dan penyelipan (keying 345.36 menjadi 3453.6).
c. Proses Desain Input
Langkah-langkahnya adalah sebagai berikut:
• Mengidentifikasi input sistem dan memberikan persyaratan logika
• Memilih control GUI yang sesuai
• Mendesain, memvalidasi dan mengetes input dengan menggunakan beberapa
kombinasi dari : Peralatan layout dan Prototyping peralatan.
• Jika perlu, mendesain source document
4. DESAIN ANTAR MUKA PENGGUNA
Pada desain antarmuka, audiens adalah system user. System user dapat
diklasifikasikan secara luas baik sebagai pakar atau orang baru – dan baik secara
terikat dan tidak terikat.
Expert user (dedicated user) adalah pengguna komputer yang berpengalaman
yang banyak menghabiskan waktunya untuk menggunakan program aplikasi khusus.
Expert user umumnya terbiasa dengan (tetapi tidak perlu ahli dalam) lingkungan
operasi aplikasi. Mereka telah menghabiskan waktu untuk belajar menggunakan
komputer. Mereka akan menginvestasikan waktu untuk menguasai antarmuka
pengguna yang kurang user-friendly. Umumnya, mereka telah hapal operasi rutin dan
tingkat di atasnya sehingga tidak memerlukan atau menginginkan feedback atau
perintah dari komputer. Mereka ingin dapat mengerjakan tugas mereka dengan
tindakan dan keystroke seminimal mungkin.
Novice user (casual user) adalah pengguna komputer yang pengalamannya
lebih sedikit yang biasanya menggunakan komputer pada frekuensi sedikit atau
bahkan pada saat-saat tertentu saja. Boleh dikatakan, novice user membutuhkan lebih
banyak bantuan daripada expert user. Bantuan dapat berupa beberapa bentuk, meliputi
menu, dialogue, perintah dan help screen.
Kebanyakan sistem yang ada saat ini didesain untuk novice system user, tetapi
disesuaikan dengan expert user. Fokusnya adalah user friendlines atau human
engineering.
Ahli desain antarmuka pengguna, Wilbert Galitz, mengemukakan masalahmasalah
antarmuka adalah:
• Terlalu banyak menggunakan jargon atau akronim komputer
• Desain yang tidak jelas atau kurang intuitif
• Tidak mampu membedakan antara tindakan pilihan (”Apa yang harus saya
lakukan selanjutnya?”)
• Pendekatan pemecahan masalah yang tidak konsisten
• Ketidakkonsistenan desain.
Untuk mengatasi masalah tersebut maka,
• Pahami pengguna anda dan tugas mereka.
• Libatkan pengguna pada desain antarmuka
• Uji sistem pada pengguna aktual. Setelah dilakukan training awal. Amati
tindakan dan kesalahan mereka dan dengarkan komentar dan pertanyaan
mereka untuk lebih memahami interaksi mereka dengan antarmuka pengguna.
• Lakukan desain interative. Antarmuka pengguna yang pertama mungkin tidak
memuaskan. Gunakan desain antarmuka pengguna yang lain untuk melakukan
beberapa iterasi desain dan pengujian. Desain antarmuka akan berakhir jika
95% pengguna khusus dapat melakukan tugas yang diharapkan tanpa kesulitan
atau bantuan.
a. Petunjuk Human Engineering
Dengan tipe pengguna seperti yang telah dijelaskan diatas, beberapa faktor
human engineering penting harus digabungkan pada desain:
• Pengguna sistem harus selalu menyadari apa yang harus dilakukan
selanjutnya. Sistem harus selalu memberikan perintah tentang bagaimana cara
maju, mundur, keluar dan lain-lain. Beberapa situasi membutuhkan tipe
feedback:
a. Katakan pada pengguna apa yang sekarang diharapkan oleh sistem. Hal ini
dapat dilakukan dalam bentuk pesan sederhana. Contoh “Pilih salah satu”.
b. Katakan pada pengguna bahwa data sudah dimasukkan dengan benar. Hal
ini dapat dilakukan sesederhana mungkin, seperti menggerakan kursor ke
field selanjutnya atau menampilkan sebuah pesan seperti “Data OK”.
c. Katakan pada pengguna bahwa data belum dimasukkan dengan benar.
Gunakan pesan pendek dan sederhana untuk memberikan pesan tentang
kebenaran format.
d. Jelaskan kepada pengguna penyebab penundaan yang terjadi dalam
pemrosesan. Contoh pada saat melakukan pencetakan, pengurutan dan
sebagainya.
e. Katakan kepada pengguna bahwa tugas telah diselesaikan atau belum
diselesaikan. Pesan seperti ”Printing not ready” dan sebagainya.
• Screen harus diformat sehingga bermacam-macam tipe informasi, perintah dan
pesan selalu muncul pada area tampilan umum yang sama.
• Pesan, perintah atau informasi harus ditampilkan dengan cukup panjang
(secukupnya) sehingga pengguna sistem dapat membacanya.
• Gunakan atribut tampilan dengan hemat. Atribut seperti blinking, higlighting
dapat membingungkan jika terlalu banyak.
• Nilai yang salah pada field dan jawaban yang harus dimasukkan oleh
pengguna harus ditentukan.
• Antisipasi kesalahan yang dapat dibuat oleh pengguna. Contoh “data akan
dihapus?”
• Berkenaan dengan error, pengguna seharusnya tidak diperkenankan untuk
meneruskan langkah sebelum memperbaiki error tersebut.
• Jika pengguna melakukan sesuatu yang dapat menimbulkan akibat yang parah,
maka keyboard harus dikunci untuk mencegah semua input lain, dan perintah
untuk memanggil analis atau technical support harus ditampilkan.
b. Tone dan Terminologi pada Dialogue
Keseluruhan aliran screen dan pesan disebut dialogue. Gunakan kalimat yang
sederhana dan benar secara gramatikal, jangan membuat sesuatu yang lucu atau manis
dan jangan rendah diri, jangan menghina kecerdasan pengguna sistem.
Berkenaan dengan terminologi yang digunakan pada dialogue komputer,
sebaiknya:
• Jangan menggunakan jargon komputer
• Hindari penggunaan singkatan. Jika kita menggunakan singkatan, maka kita
menganggap bahwa pengguna telah paham bagaimana menerjemahkannya.
• Gunakan istilah yang sederhana
• Penggunaan terminologi harus konsisten
• Berhati-hati mengungkapkan perintah – gunakan kata kerja tindakan yang
tepat.
c. Pertimbangan khusus untuk Desain Antarmuka Pengguna
Selain membangun sytle antarmuka pengguna, ada beberapa pertimbangan
khusus bagi desain antarmuka pengguna. Bagaimana pengguna akan dikenali dan
diautentikasi untuk menggunakan sistem tersebut? Adakah beberapa pertimbangan
keamanan atau privasi yang akan diberikan dalam antarmuka pengguna? Akhirnya
bagaiamana pengguna akan mendapatkan pertolongan melalui antarmuka pengguna?
Internal Control – autentikasi dan autorisasi. Pada sebagian besar lingkungan,
pengguna harus diautentikasi dan diautorisasi oleh sistem sebelum mereka diizinkan
melakukan beberapa tindakan tertentu. Dengan kata lain, pengguna sistem harus ”log
into” ke dalam sistem. Sebagian besar log-ins membutuhkan User ID dan Password.
Terdapat beberapa model untuk membuka dan mengatur sebuah hak istimewa.
Satu petunjuk penting adalah menentukan hak istimewa untuk peran/role, bukan
untuk individu. Untuk masing-masing peran, perlu ditetapkan hak-hak istimewa
khusus yang akan diberikan kepada peran. Hak istimewa tersebut meliputi iin untuk
membaca tabel atau view tertentu; izin membuat, mengubah atau menghapus record
pada tabel atau view khusus dan sebagainya. View pengguna yang berbeda-beda
dapat digunakan untuk mengkustomisasi antarmuka pengguna untuk kategori
pengguna yang berbeda-beda. Misalnya cukup mudah untuk ”ghost” (mengubah font
dari hitam ke abu-abu) dan men-disable opsi menu dan dialogue box yang dilarang
untuk beberapa kelompok pengguna sistem.
Online Help. Orang menginginkan akses langsung dan segera ke context sensitive
help, yakni help yang cukup pintar untuk menggambarkan apa yang dapat mereka
lakukan. Help system yang lengkap meliputi daftar isi, berbagai perintah, contoh dan
sebuah index yang rinci.
Help wizards memandu pengguna melalui proses yang kompleks dengan cara
menampilkan sebuah urutan dialogue box yang membutuhkan input dari user dan
feedback dari sistem. Perhatikan hal-hal berikut:
• Sebagai help wizards tipikal, dialogue baisanya memasukkan serangkaian
perintah atau pertanyaan untuk mendapatkan respons pengguna.
• Wizard berisi penjelasan untuk membantu pemahaman pengguna dan
pengambilan keputusan.
• Wizard juga menyediakan sebuah tombol untuk meminta help yang lebih
detail guna menyelesaikan tugas.
• Tombol ”Next” menganjurkan langkah tambahan atau lanjutan untuk
didukung oleh help wizard (tombol ”Next” biasanya diubah menjadi ”Finish”
setelah serangkaian dialogue box selesai).
Menggunakan warna untuk mengatur perhatian
Warna dapat digunakan untuk memfokuskan perhatian user pada elemen – elemen penting secara efektif. Sebagai contoh, pada masa pemilihan kepresidenan US, sebagian besar website pemilihan menggunakan tombol penyumbangan suara (donation) dengan warna merah. Merah adalah warna terang dan sangat kuat yang dapat menarik perhatian, dan akan terlihat menonjol dibanding content lain yang berwarna biru atau warna lain yang bersifat dingin.
Warna – warna yang bersifat hangat seperti merah, kuning dan orange adalah warna yang terang secara alami dan cenderung menarik perhatian mata. Warna – warna ini juga terlihat ”mengembang” ketika digunakan bersamaan dengan warna – warna yang bersifat lebih dingin seperti biru dan hijau.
Contohnya, pada website function.net dan causecast.org
Menggunakan kata kerja dalam label
Kita dapat membuat dialog message box menjadi lebih bermanfaat dengan menggunakan label yang benar pada tombol (button) dan link. Jika sebuah pesan atau error muncul dan pilihannya adalah “Yes”, “No”, dan “Cancel”, maka user perlu membaca keseluruhan pesan untuk menjawab pop up yang muncul.
Tetapi, sebenarnya kita dapat mempercepat proses dengan menggunakan kata kerja dalam penulisan label. Jadi, daripada menggunakan ”Yes”, ”No”, dan ”Cancel”, kita bisa menggunakan label ”Save”, ”Don’t Save”, dan ”Cancel”. Dengan penggunaan label – label ini, user tidak perlu membaca keseluruhan pesan untuk memahami pilihan option yang disediakan dan menentukan tindakan apa yang akan dilakukan. Semua informasi terkandung dalam label pada button atau link.
Menggunakan kontras untuk mengatur fokus
Dengan konsep yang sama, kita juga dapat mengatur pusat perhatian (fokus) user dengan menggunakan kontras diantara elemen – elemen yang ada. Teknik ini sangat berguna pada website – website yang kaya dan penuh dengan informasi, seperti blog, forum dan jejaring sosial, dimana kita ingin menjadikan sebagian besar informasi diperhatikan dengan tetap menampilkan elemen – elemen tambahan, seperti tanggal, dll.
Menggunakan kontras yang rendah (fade) pada suatu bagian text memungkinkan user dapat dengan mudah memusatkan perhatian mereka pada bagian text lain yang lebih penting.
Contohnya dapat dilihat di URL yang dipost – Bagian 3
URL : http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/
.
1. Konsep desain User Interface
Pada intinya konsep mendesain tampilan website sangat berkaitan dengan desain gra-fis , dan pada dasarnya mengikut prinsip desain grafis secara umum. Oleh karena itu alangkah baiknya jika dalam mendesain halaman tampilan website juga memperhatikan prinsip desain. Prinsip-prinsip desain tersebut adalah:
1. Komunikatif
Prinsip komunikatif berhubungan dengan corporate identity, isi pesan serta audiens.
2. Estetis
Fungsi dari estetis ini adalah memberikan suatu keindahan, sehingga lebih menarik minat pengunjung untuk lebih menggali informasi yang ditawarkan dari suatu website.
3. Ekonomis
Desain web harus memperhatiakan faktor ekonomis dalam arti ukuran file yang digunakan. Hal tersebut berkaitan erat dengan kecepatan akses yang ditawarkan suatu website.
Untuk mendapatkan desain yang komunikatif, estetis dan ekonomis hendaknya seorang web designer perlu memperhatikan pedoman-pedoman yang ada untuk membuat tata letak suatu tampilan, yaitu dalam mengatur elemen-elemen layout. Pedoman yang dimaksud adalah:
1. Kesatuan
Elemen-elemen layout dari halaman harus ditempatkan sedemikian rupa sehingga merupakan kesatuan informasi pada satu halaman atau beberapa halaman.
2. Balance
Elemen-elemen layout dari halaman harus ditempatkan sedemikian rupa sehingga terdapat keseimbangan secara keseluruhan
3. Kontras
Diperlukan untuk menonjolkan bagian yang dianggap lebih penting dari bagian lainnya. Kontras dapat dinyatakan dengan membedakan ukuran serta warna dari elemen-elemen layout.
4. Kontinyuitas
Informasi lebih dimengerti oleh pengguna bila mempunyai aliran-aliran yang baik, sedikit gangguan yang menghambatnya. Suatu aliran informasi dapat dikatakan kontinyu dan harmonis bila tampilannya mencerminkan kesinambungan dari satu bagian ke bagian lain. Kontinuitas dapat dibuat dengan membuat halaman-halaman mempunyai gaya, bentuk atau warna yang memberikan pengguna me
http://rikoredish.multiply.com/journal/item/16/Perancangan_website_Web_Design
https://hermanjul.wordpress.com/2010/05/09/mis-individual-assignment-3/#comments
2. Report
Adalah objek database untuk keperluan print, tampilan report dapat disesuaikan dengan spesifikasi kita. Dengan menggunakan fasilitas report, maka informasi dari database dengan format printout dapat lebih mudah dimengerti dibandingkan dengan format yang berupa table yang bisa membingungkan pembacanya.
Berikut, step by step cara membuat report :
1. Buka file database anda yang akan dibuat report nya.
2. Pada area Objects klik Reports
3. Klik tombol New pada tombol jendela database anda, pada kota dialog New Report yang muncul klik Report Wizard lalu Ok
4. Pada kotak dialog Report Wizard yang muncul, klik tombol list untuk memilihs Tables/Queries
5. Pilih Query yang akan dibuat report dari list pilihan yang muncul Selanjutnya klik tombol kanan ganda untuk memilih semua field yang disediakan. Perhatikan Gambar 1.2. Lalu Next .
6. Berikutnya klik Merk > tombol panah kanan > Next. Langkah tersebut untuk melakukan grouping berdasarkan field Merk.
7. Berikutnya klik Next, tidak perlu melakukan perubahan.
8. Klik Next Untuk pilihan style klik Corporate > Next
9. Berikutnya ketik judul report anda untuk title
10. Klik Finish lalu close dan save. Maka tampilannya akan seperti Gambar 1.5.
Analisanya :
Report (Laporan) merupakan hasil pengolahan data menjadi sebuah informasi yang sangat berguna bagi penggunanya dan program ini memiliki fasilitas laporan dalam bentuk print out. Report memudahkan user dalam pembuatan laporan ( Report ) dengan menyediakan fasilitas Report Wizard yang mampu untuk merancang beberapa bentuk laporan dan dapat memodifikasi bentuk laporan sesuai dengan pola yang diharapkan
Jadi, dengan menggunakan fasilitas report yang ada pada MS.Access, user lebih memahami informasi dari database tersebut.
User Interface (UI) adalah bentuk tampak (visible form) dari sebuah program yang merupakan media interaksi antara program dengan penggunanya (user). Sebagian besar programmer tidak menyukai proses pembuatan UI dalam program mereka. Hal ini cukup mengherankan karena sebenarnya merancang UI cukup mudah, jelas, dan menyenangkan.
Mudah, karena tidak membutuhkan algoritma yang rumit seperti bagaimana menghitung posisi tombol agar berada di tengah2 window. Jelas, karena jika kita melakukan kesalahan akan langsung diketahui dan bisa langsung kita koreksi. Menyenangkan, karena hasil dari apa yang kita buat langsung tampak mata saat itu juga, apalagi jika kita bekerja di lingkungan visual. Saat saya bekerja dengan UI, saya merasa seperti sedang memahat atau melukis.
Sebagian besar programmer merasa kesulitan saat merancang UI untuk program mereka, biasanya hal ini berawal dari ketakutan atau ketidak-pedean mereka. Programmer mengira bahwa perancangan UI adalah seperti perancangan grafis (graphics design) yang dianggap sebuah proses misterius dari kreativitas, yang biasanya orang2-nya tampil nyleneh tapi mampu menghasilkan karya artistik dan enak dipandang. Sedang programmer menganggap dirinya sendiri sebagai orang yang logis, kuat dalam analisa, tapi lemah dalam penilaian artistik. Jadi, mereka berpikir bahwa mereka tidak akan mampu (setidaknya tidak akan bagus) dalam merancang UI untuk program mereka.
Sebenarnya, perancangan UI sebuah program cukup mudah dan logis juga. Pekerjaan ini tidak serumit perancangan grafis dan tidak membutuhkan orang2 lulusan institut seni. Ada metode yang rasional dan aturan yang logis untuk membangun UI sebuah program. Kita tidak akan membahas hal2 seputar seni dalam artikel ini, melainkan sekumpulan metode dan aturan yang cukup sederhana. Sebelumnya saya tekankan lagi, artikel ini ditujukan bagi programmer. Kita tidak akan membahas tentang bagaimana kode membuat/memasang menu, meletakkan tombol, dan lain sebagainya. Sebaliknya, kita akan membahas pertimbangan kapan kita memasang menu, atau menggantinya dengan toolbar, dan sejenisnya.
Sebuah user interface yang baik, biasanya dikembangkan dengan prinsip dan sekumpulan proses yang menitikberatkan pada pengguna ataupun data yang diprosesnya.
Berdasar pada prisip demikian maka secara mendasar terdapat dua prinsip fundamental tentang perancangan dan tampilan user interface yakni berdasar pada
1) User Centered Design
2) Data Centered Design
User Centered design menekankan pada suatu pemikitran bahwa pengguna harus sentiasa merasakan bahwa dirinya mengendalikan piranti lunak (bukan sebaliknya). Sehingga implikasi dari dasar ini adalah:
1) Operasional Sistem , berdasar aksi yang diketahui atau atas izin pengguna. Bukanlah suatu user interface yang baik bila semuanya diatur oleh piranti lunak.
2) Sistem yang baik diharapkan dapat menjembatani pengguna untuk dapat merubah tampilan/user interface sesuai dengan kebutuhan. Atau dengan kata lain UI hendaknya bersifat fleksibel.
3) User Interface hendaknya menjadi jembatan antara pemrosesan data dengan waktu tunggu pengguna. Artinya user interface yang baik menginformasikan segala status sistem yang terjadi.
Data Centered design menekankan pada suatu pemikiran bahwa data adalah yang utama untuk ditampilkan. Sehingga terdapat aspek simpilfikasi tampilan terutama pada tampilan yang bersifat grafis (seperti pada web). Impilikasi dari dasar ini adalah:
1) Tampilan akan dititikberatkan bagaimana menampilkan data yang baik dan jelas. Hal ini biasanya dicapai dengan menggunakan simplify template sehingga data dapat leluasa untuk ditampilkan.
2) Sistem akan lebih mengutamakan kontrol prosessing dan tampilan data, sehingga data akan dapat ditampilkan dengan berbagai macam point of view demi kejelasan sumber data.
3) Tampilan jenis ini mengakibatkan pengguna lebih terfokus pada bagaimana data dan informasi diperoleh dan dimanfaatkan daripada sisi grafis aplikasi dan interaksi respon aplikasi.
User Interface (UI) adalah bentuk tampak (visible form) dari sebuah program yang merupakan media interaksi antara program dengan penggunanya (user). Sebagian besar programmer tidak menyukai proses pembuatan UI dalam program mereka. Hal ini cukup mengherankan karena sebenarnya merancang UI cukup mudah, jelas, dan menyenangkan.
Mudah, karena tidak membutuhkan algoritma yang rumit seperti bagaimana menghitung posisi tombol agar berada di tengah2 window. Jelas, karena jika kita melakukan kesalahan akan langsung diketahui dan bisa langsung kita koreksi. Menyenangkan, karena hasil dari apa yang kita buat langsung tampak mata saat itu juga, apalagi jika kita bekerja di lingkungan visual. Saat saya bekerja dengan UI, saya merasa seperti sedang memahat atau melukis.
Sebagian besar programmer merasa kesulitan saat merancang UI untuk program mereka, biasanya hal ini berawal dari ketakutan atau ketidak-pedean mereka. Programmer mengira bahwa perancangan UI adalah seperti perancangan grafis (graphics design) yang dianggap sebuah proses misterius dari kreativitas, yang biasanya orang2-nya tampil nyleneh tapi mampu menghasilkan karya artistik dan enak dipandang. Sedang programmer menganggap dirinya sendiri sebagai orang yang logis, kuat dalam analisa, tapi lemah dalam penilaian artistik. Jadi, mereka berpikir bahwa mereka tidak akan mampu (setidaknya tidak akan bagus) dalam merancang UI untuk program mereka.
Sebenarnya, perancangan UI sebuah program cukup mudah dan logis juga. Pekerjaan ini tidak serumit perancangan grafis dan tidak membutuhkan orang2 lulusan institut seni. Ada metode yang rasional dan aturan yang logis untuk membangun UI sebuah program. Kita tidak akan membahas hal2 seputar seni dalam artikel ini, melainkan sekumpulan metode dan aturan yang cukup sederhana. Sebelumnya saya tekankan lagi, artikel ini ditujukan bagi programmer. Kita tidak akan membahas tentang bagaimana kode membuat/memasang menu, meletakkan tombol, dan lain sebagainya. Sebaliknya, kita akan membahas pertimbangan kapan kita memasang menu, atau menggantinya dengan toolbar, dan sejenisnya.
Sebuah user interface yang baik, biasanya dikembangkan dengan prinsip dan sekumpulan proses yang menitikberatkan pada pengguna ataupun data yang diprosesnya.
Berdasar pada prisip demikian maka secara mendasar terdapat dua prinsip fundamental tentang perancangan dan tampilan user interface yakni berdasar pada
1) User Centered Design
2) Data Centered Design
User Centered design menekankan pada suatu pemikitran bahwa pengguna harus sentiasa merasakan bahwa dirinya mengendalikan piranti lunak (bukan sebaliknya). Sehingga implikasi dari dasar ini adalah:
1) Operasional Sistem , berdasar aksi yang diketahui atau atas izin pengguna. Bukanlah suatu user interface yang baik bila semuanya diatur oleh piranti lunak.
2) Sistem yang baik diharapkan dapat menjembatani pengguna untuk dapat merubah tampilan/user interface sesuai dengan kebutuhan. Atau dengan kata lain UI hendaknya bersifat fleksibel.
3) User Interface hendaknya menjadi jembatan antara pemrosesan data dengan waktu tunggu pengguna. Artinya user interface yang baik menginformasikan segala status sistem yang terjadi.
Data Centered design menekankan pada suatu pemikiran bahwa data adalah yang utama untuk ditampilkan. Sehingga terdapat aspek simpilfikasi tampilan terutama pada tampilan yang bersifat grafis (seperti pada web). Impilikasi dari dasar ini adalah:
1) Tampilan akan dititikberatkan bagaimana menampilkan data yang baik dan jelas. Hal ini biasanya dicapai dengan menggunakan simplify template sehingga data dapat leluasa untuk ditampilkan.
2) Sistem akan lebih mengutamakan kontrol prosessing dan tampilan data, sehingga data akan dapat ditampilkan dengan berbagai macam point of view demi kejelasan sumber data.
3) Tampilan jenis ini mengakibatkan pengguna lebih terfokus pada bagaimana data dan informasi diperoleh dan dimanfaatkan daripada sisi grafis aplikasi dan interaksi respon aplikasi.
URL : http://geeks.netindonesia.net/blogs/ridi/pages/3186.aspx
1. Penggunaan warna yang tepat
Warna sangat berpengaruh dalam sebuah desain. Seperti yang telah kita ketahui, masing masing warna memiliki karakter tersendiri, dan mecerminkan suasana tertentu. Skema warna (kombinasi warna) dalam desain harus bisa mewakili karakter yang diinginkan. Tetapi perlu diingat, kombinasi warna yang berlebihan akan mengalihkan pengunjung dari konten website.
2.Teks yang mudah dibaca
Teks harus mudah dibaca, hal ini bisa dicapai dengan mengatur kontras warna teks dengan background. Selain itu penggunaan font yang tepat juga perlu diperhatikan, jenis font, ukuran font, style dan konsistensinya dalam desain. Selain itu pengaturan paragraf dan jarak antara teks dengan elemen lain juga perlu diperhatikan. Whitespace atau ruang kosong antar elemen harus harmonis. Semua hal tersebut bertujuan supaya Teks mudah dibaca.
3. Desain visual yang harmonis
Image atau gambar secara visual merupakan unsur atau elemen utama dalam desain. Image bisa digunakan sebai pemanis, atau penyeimbang atau point of interest. Sebaiknya pemilihan image sesuai dengan keseluruhan tema dan karakter desain website. Komposisi image dengan elemen lain juga harus sesuai, adakalanya sebuah website membutuhkan image yang besar (hampir fullscreen) untuk memberi kesan tertentu, dan dikombinasi dengan teks yang lebih kecil porsinya, ada pula website dengan komposisi teks yang lebih banyak dan image hanya sebagai unsur tambahan. Komposisi antara image dengan teks tergantung dari tema dan karakter yang ingin dibangun. Yang penting harus bijaksana dalam memilih, menempatkan, dan mengkomposisi image, dan yang tidak kalah penting adalah kualitas image itu sendiri. Hal lain yang harus menjadi pertimbangan adalah besarnya file. Kecepatan load sebuah halaman website sebagian besar ditentukan oleh besarnya ukuran file, terutama image, apalagi bagi kita di Indonesia yang kecepatan akses internetnya sebagian besar dibawah rata-rata.
4. Layout yang Simpel
Layout atau tataletak desain diusahakan sesederhana mungkin, minimalisir elemen-elemen yang tidak penting, maksimalkan whitespace (jarak antar elemen). Website dengan layout yang baik, mudah untuk dijelajahi, pengunjung mudah untuk menemukan sesuatu, dan dengan cepat menemukan apa yang dicarinya. Layout yang berantakan membuat pengunjung kesulitan dan membutuhkan waktu lebih lama untuk menemukan sesuatu. Penempatan yang tidak sesuai, point of interest yang menyesatkan, dan urutan tata letak yang acak, sangat tidak menguntungkan.
5. Alur yang mudah dimengerti
Layout desain website harus bisa menuntun pengunjung dan mengarahkan mereka ke sesuatu yang kita inginkan, jadi kitalah yang menuntun alur perhatian pengunjung dari titik a, ke titik b, ke titik C, dan seterusnya, sehingga tujuan kita dan misi dari website bisa dicerna dengan baik oleh pengunjung. Hal ini tidaklah mudah, berbeda dengan media lain seperti televisi, dan koran, audience dalam kendali pemberi informasi, mereka menerima apa adanya dan pasif, dan tidak melakukan tindakan aktif untuk memilah. Sedangkan pada website, pengunjung memiliki kendali penuh, mereka aktif, dan oleh karena itu alur dari desain website harus jelas dan mudah dipahami agar pengunjung tidak frustasi menemukan apa yang mereka inginkan.
6. Menu Navigasi yang jelas
Salah satu elemen penting yang juga wajib diperhatikan adalah navigasi atau menu. Menu navigasi adalah satu-satunya cara pengunjung berinteraksi dengan website. Ada banyak cara dan banyak desain menu navigasi, tetapi yang tidak boleh dilupakan adalah fungsi utamanya, sebagai alat interaksi pengunjung dengan website. Website bisa saja mempunyai beberapa menu/navigasi, bisa diatas pada header, atau pada sidebar, maupun dibawah pada footer. Tidak ada rumus yang mengharuskan dimana kita menempatkan menu, yang penting harus menyatu dengan alur dan layout desain sebuah website.
Sumber : http://satudigit.com/tutorial/desain-website-yang-baik-tampilan-visual-dan-layout/
1. Penggunaan warna yang tepat
Warna sangat berpengaruh dalam sebuah desain. Seperti yang telah kita ketahui, masing masing warna memiliki karakter tersendiri, dan mecerminkan suasana tertentu. Skema warna (kombinasi warna) dalam desain harus bisa mewakili karakter yang diinginkan. Tetapi perlu diingat, kombinasi warna yang berlebihan akan mengalihkan pengunjung dari konten website.
2.Teks yang mudah dibaca
Teks harus mudah dibaca, hal ini bisa dicapai dengan mengatur kontras warna teks dengan background. Selain itu penggunaan font yang tepat juga perlu diperhatikan, jenis font, ukuran font, style dan konsistensinya dalam desain. Selain itu pengaturan paragraf dan jarak antara teks dengan elemen lain juga perlu diperhatikan. Whitespace atau ruang kosong antar elemen harus harmonis. Semua hal tersebut bertujuan supaya Teks mudah dibaca.
3. Desain visual yang harmonis
Image atau gambar secara visual merupakan unsur atau elemen utama dalam desain. Image bisa digunakan sebai pemanis, atau penyeimbang atau point of interest. Sebaiknya pemilihan image sesuai dengan keseluruhan tema dan karakter desain website. Komposisi image dengan elemen lain juga harus sesuai, adakalanya sebuah website membutuhkan image yang besar (hampir fullscreen) untuk memberi kesan tertentu, dan dikombinasi dengan teks yang lebih kecil porsinya, ada pula website dengan komposisi teks yang lebih banyak dan image hanya sebagai unsur tambahan. Komposisi antara image dengan teks tergantung dari tema dan karakter yang ingin dibangun. Yang penting harus bijaksana dalam memilih, menempatkan, dan mengkomposisi image, dan yang tidak kalah penting adalah kualitas image itu sendiri. Hal lain yang harus menjadi pertimbangan adalah besarnya file. Kecepatan load sebuah halaman website sebagian besar ditentukan oleh besarnya ukuran file, terutama image, apalagi bagi kita di Indonesia yang kecepatan akses internetnya sebagian besar dibawah rata-rata.
4. Layout yang Simpel
Layout atau tataletak desain diusahakan sesederhana mungkin, minimalisir elemen-elemen yang tidak penting, maksimalkan whitespace (jarak antar elemen). Website dengan layout yang baik, mudah untuk dijelajahi, pengunjung mudah untuk menemukan sesuatu, dan dengan cepat menemukan apa yang dicarinya. Layout yang berantakan membuat pengunjung kesulitan dan membutuhkan waktu lebih lama untuk menemukan sesuatu. Penempatan yang tidak sesuai, point of interest yang menyesatkan, dan urutan tata letak yang acak, sangat tidak menguntungkan.
5. Alur yang mudah dimengerti
Layout desain website harus bisa menuntun pengunjung dan mengarahkan mereka ke sesuatu yang kita inginkan, jadi kitalah yang menuntun alur perhatian pengunjung dari titik a, ke titik b, ke titik C, dan seterusnya, sehingga tujuan kita dan misi dari website bisa dicerna dengan baik oleh pengunjung. Hal ini tidaklah mudah, berbeda dengan media lain seperti televisi, dan koran, audience dalam kendali pemberi informasi, mereka menerima apa adanya dan pasif, dan tidak melakukan tindakan aktif untuk memilah. Sedangkan pada website, pengunjung memiliki kendali penuh, mereka aktif, dan oleh karena itu alur dari desain website harus jelas dan mudah dipahami agar pengunjung tidak frustasi menemukan apa yang mereka inginkan.
6. Menu Navigasi yang jelas
Salah satu elemen penting yang juga wajib diperhatikan adalah navigasi atau menu. Menu navigasi adalah satu-satunya cara pengunjung berinteraksi dengan website. Ada banyak cara dan banyak desain menu navigasi, tetapi yang tidak boleh dilupakan adalah fungsi utamanya, sebagai alat interaksi pengunjung dengan website. Website bisa saja mempunyai beberapa menu/navigasi, bisa diatas pada header, atau pada sidebar, maupun dibawah pada footer. Tidak ada rumus yang mengharuskan dimana kita menempatkan menu, yang penting harus menyatu dengan alur dan layout desain sebuah website.
Sumber : http://satudigit.com/tutorial/desain-website-yang-baik-tampilan-visual-dan-layout/