Minggu, 01 Agustus 2010

Sketsa Prototyping


Konstruksi teknis pada Sketsa Prototyping yang digunakan sebagai media interaksi manusia dan komputer.


1.Storyboard
Digunakan di awal desain, biasanya digunakan dengan skenario, lebih terinci, dan dapat diputar ulang. Kumpulan dari sketsa/frame bersifat individual juga menyajikan urutan inti cerita. Storyboard juga menunjukan bagaimana kemungkinana user dapat mengalami peningkatan melalui setiap aktifitas.
Contoh gambar :




2.Sketsa
Sketsa sangat penting untuk low-fidelity prototipe. Dalam sketsa kita di haruskan untuk tidak takut dengan kemampuan menggambar kita. Sketsa menampilkan "tampilan" cepat dari interface, konsep desain, dll. Sketsa juga penting untuk pengetahuan user akan apa yang dia lihat jelas dalam apa-apa yang terdapat dalam sistem tersebut. Dengan kata lain sketsa merupakan gambar dasar sebelum di implementasikan kedalam bentuk nyata.
Contoh gambar :



3. Wizard-of-oz
Wizard-of-oz berbentukan tampilan maket dan berinteraksi dengan pemakai, baik untuk mensimulasikan sistem yang sulit dibuat. Maket juga adalah suatu bentuk komunikasi kepada user dalam suatu bentuk bangunan yang akan di realisasikan nantinya. Jadi user dapat melihat bentuk awal sebelum melihat bentuk jadi nya nanti.
Contoh gambar :



Sumber :
http://bbogel.blogspot.com/2010/07/organisasi-semantik-menu-binary-menus.html


Salam Tecom-C...........
Siiiiappp.........

Tools Prototyping

Konstruksi teknis pada Tools Prototyping yang digunakan sebagai media interaksi manusia dan komputer.

1. Draw/Paint Program
contoh: Photoshop, Coreldraw
- Menggambar setiap layar, baik untuk dilihat.
- Prototype horisontal, tipis.
- Adobe Photoshop.

Contoh gambar:




2. Scripted Simulations/Slide Show,
contoh: Powerpoint, Hypercard,Macromedia Director, HTML.

- Letakkan tampilan seperti storyboard dengan (animasi) perubahan diantaranya.
- Dapat memberikan user catatan yang sangat spesifik.
- Disebut chauffeured prototyping.
- Macromedia Director.

contoh gambar :





3. Interface Builders
contoh: Visual Basic, Delphi, UIMX
- Tools untuk menampilkan jendela, kendali, dan lain-lain dari interface.
contoh :




Sumber :
http://dhimon11.blogspot.com/2010/03/prototyping.html
http://bbogel.blogspot.com/2010/07/organisasi-semantik-menu-binary-menus.html


Salam Tecom-C...........
Siiiiappp.........

Sistem menu grup pada windows

Konstruksi teknis pada Sistem menu grup pada windows yang digunakan sebagai media interaksi manusia dan komputer.

Sistem menu merupakan pilihan yang tepat untuk menunjukkan kemampuan dan fasilitas yang dimiliki oleh sebuah program aplikasi kepada pengguna. Menu adalah daftar sejumlah pilihan dalam jumlah terbatas yang biasanya berupa suatu kalimat atau kumpulan beberapa kata. Ditinjau dari teknik penampilan pilihan-pilihan
pada sebuah sistem menu, dikenal dua jenis sistem menu, yaitu sistem menu datar dan sistem menu tarik (pulldown) yang berbasis pada struktur hirarki pilihan (struktur pohon pilihan).
Sistem Menu dibuat dengan bermacam-macam style. Style xp, style vista, style kota, style ndeso, style ini, dan style itu..akhirnya intinya adalah bagaimana si pengguna program dengan nyaman dapat menggunakan fasilitas yang ada pada program dengan bantuan Daftar Pilihan.

Jenis Sistem Menu
Sistem menu merupakan pilihan yang tepat untuk menunjukkan kemampuan dan fasilitas yang dimiliki oleh sebuah program aplikasi kepada pengguna. Menu adalah daftar sejumlah pilihan dalam jumlah terbatas yang biasanya berupa suatu kalimat atau kumpulan beberapa kata. Ditinjau dari teknik penampilan pilihan-pilihan pada sebuah sistem menu, dikenal dua jenis sistem menu, yaitu sistem menu datar dan sistem menu tarik (pulldown)yang berbasis pada struktur hirarki pilihan (struktur pohon pilihan).

a. Sistem Menu Datar
Sistem menu datar adalah sistem menu yang menampilkan semua pilihan secara lengkap. Sistem menu datar pada intinya memanfaatkan seluruh lebar layar untuk menampilkan menuyang tersedia. Dalam sistem menu datar, kemampuan dan fasilitas yang dimiliki oleh suatu program aplikasi akan ditampilkan secara lengkap dan biasanya menggunakan kalimat-kalimat yang cukup panjang.

Penentuan pilihan pada sistem menu datar dapat dikerjakan dengan dua cara, yaitu:
• Cara pertama adalah dengan menggunakan selektor dari setiap pilihan yang tersedia. Dalam menentukan jenis selektor yang akan digunakan (angka, huruf, atau kombinasi keduanya), salah satu bahan pertimbangannya adalah banyaknya pilihan yang akan disediakan dan ragam selektornya sendiri. Pada dasarnya, baik pada selektor huruf maupun selektor angka terdapat dua ragam selektor, yaitu selektor kompatibel dan selektor tak kompatibel. Selektor huruf kompatibel adalah hurufyang sama dengan huruf pertama dari suatu pilihan. Selektor angka kompatibel adalah angka desimal yang sama dengan nomor urut alphabetis dari huruf pertama dari suatu pilihan. Untuk selektor tak kompatibel, baik huruf maupun angka, selektornya dapat dipilih secara sembarang.

• Cara kedua adalah dengan menggerakkan tanda terang (highlight marker) ke suatu pilihan dan kemudian dikonfirmasikan dengan mengklik mouse. Dari sisi implementasi, cara pertama lebih mudah diimplementasikan dibandingkan dengan cara kedua. Tetapi dari sisi pengguna, cara kedua biasanya lebih disukai karena tampilannya tidak monoton.

b. Sistem Menu Tarik dan Icon
Sering kita menjumpai suatu program aplikasi yang mempunyai cukup banyak kemampuan dan fasilitas. Agar kemampuan dan fasilitas yang ada dapat dimanfaatkan oleh pengguna, maka pemrogram harus menuliskan semua menu pilihan sehingga pengguna dapat memilihnya. Karena cacah pilihan cukup banyak, dan masing-masing pilihan merupakan suatu kalimat yang cukup panjang, maka kemungkinan digunakannya seluruh layar untuk menampilkan daftar pilihan itu cukup besar. Dengan kata lain, pada program-program aplikasi tertentu, suatu saat layar akan penuh dengan pilihan sehingga ada kesan bahwa seolah-olah pengguna harus berpindah dari satu layar (menu pilihan) ke layar lain (sesuai dengan pilihan yang dipilih). Untuk mengatasi hal ini, dikembangkanlah suatu cara penampilan daftar menu yang disebut dengan menu tarik (pulldown menu atau pop-up menu).


• Organisasi Semantik Menu




• Binary menus




• Multiple selection menus





• Multiple-item menus / radio buttons





• Pull-down and pop-up menus





• Scrolling and two-dimensional menus





• Alphasliders



• Embedded links





• Iconic menus, toolbars, or palettes




• Linear Sequences & Multiple Menus




Tree-Structured Menus

• Ketika kumpulan item berkembang dan menjadi sulit dipelihara dalam kendali intelektual, perancang dapat membentuk kategori item-item yang serupa, membentuk struktur tree.

• Contoh pengelompokan:
– Laki-laki, perempuan
– Hewan, sayuran, mineral
– Fonts, size, style, spacing

• Depth versus Breadth:
– Depth: jumlah level.
– Breadth: jumlah item per level.

• Pengelompokan semantik:
– Kelompokkan item-item yang serupa secara logis.
– Bentuk kelompok yang melingkupi semua kemungkinan.
– Pastikan item tidak overlap.
– Gunakan peristilahan yang dikenal.

Acyclic & Cyclic Menu Networks

• Kadang-kadang lebih cocok daripada struktur tree.
• Memungkinkan jalur dari bagian tree yang berbeda, tidak mengharuskan pemakai memulai dari menu utama.
• Secara alami terdapat pada:

– Hubungan sosial.
– Jalur transportasi.
– Kutipan dalam jurnal ilmiah.

• Membutuhkan penelusuran balik.
• Kadang-kadang lebih cocok daripada struktur tree.
• Ketika item-item menu telah dipilih, urutan presentasinya perlu diperhatikan.
• Beberapa dasar pengurutan:

– Waktu (kronologis).
– Numeris (menaik atau menurun).
– Sifat fisik (panjang, luas, volume dsb. Secara menaik atau menurun).

• Banyak kasus pengurutan tidak mempunyai aturan pengurutan yang berhubungan dengan tugas, sehingga perlu dipertimbangkan:
– Pengurutan alfabetis istilah-istilah.
– Pengelompokan item-item serupa (dibatasi dengan pemisah antarkelompok).
– Yang sering digunakan ditempatkan di awal.
– Yang paling penting ditempatkan di awal.

Pergerakan Cepat pada Menu

• Menu dengan typeahead
• Nama menu atau bookmarks
• Menu macros

Menu dengan Typeahead

• Penting jika menu sudah sering digunakan sementara waktu respons atau kecepatan tampil lambat.
• Pendekatan BLT (Bacon, Lettuce, Tomato Sandwich): pembentukan mnemonik dari penggabungan huruf-huruf pilihan menu.

Nama Menu atau Bookmarks


• Penamaan sederhana memudahkan pemakai mengakses menu secara langsung.
• Web browser menyediakan bookmarks atau favorites sebagai jalan pintas bagi pemakai untuk menuju situs yang pernah dikunjungi.

Menu Macros

• Perintah yang sering digunakan dapat direkam dan disimpan sebagai makro.
• Pada beberapa software, makro dapat ditempatkan di toolbar sebagai ikon.

Tata Letak Menu

• Judul
• Penamaan pilihan menu
• Tata letak dan desain grafis

Tata Letak Menu: Judul

• Menu tunggal: Judul yang deskriptif.
• Menu tree: Nama pilihan harus sama dengan judul halaman yang dipanggil.

Tata Letak Menu: Penamaan Pilihan Menu


• Gunakan peristilahan yang dikenal dan konsisten.
• Pastikan item dapat dibedakan dari pilihan lain.
• Gunakan pemilihan kata yang konsisten dan singkat.
• Tempatkan kata kunci di kiri.

Tata Letak Menu: Tata Letak dan Desain Grafis

• Perhatikan kendala seperti lebar dan tinggi layar, kecepatan tampil, character set, dan highlighting.
• Buat pedoman/panduan untuk komponen-komponen: judul, penempatan item, petunjuk, pesan kesalahan, dan laporan status.
Formulir Isian
• Formulir isian cocok dipakai jika banyak field data dibutuhkan.
• Pendekatan formulir isian menarik karena:

– Kelengkapan penuh informasi terlihat.
– Seperti formulir kertas.
– Sedikit petunjuk diperlukan.

Beberapa Variasi Isian Field


• Combo box: kombinasi list box dan text box.
• Coded fields: mempunyai mask untuk format isian khusus. Mis.:
– Telepon – (___)___-_____
– Social Security Number – ___-__-____
– Waktu – __:__ __
– Tanggal – __/__/____
– Nilai uang – $_____.00




Kotak Dialog

• Kotak dialog adalah kombinasi teknik menu dan formulir isian yang banyak digunakan di GUI modern.
• Perlu diperhatikan:

– Tata letak internal kotak dialog
– Hubungan eksternal kotak dialog

Pedoman Tata Letak Internal Kotak Dialog

• Judul berarti, gaya konsisten.
• Pengurutan dari atas kiri ke bawah kanan.
• Pengelompokan dan penegasan.
• Tata letak yang konsisten.
• Peristilahan, font, penggunaan huruf besar, justifikasi yang konsisten.
• Tombol standar (OK, Cancel).
• Pencegahan kesalahan.

Pedoman Hubungan Eksternal Kotak Dialog

• Penampilan dan penutupan halus.
• Dapat dibedakan tapi batasnya kecil.
• Ukuran cukup kecil (minimalkan overlap).
• Dekat dengan item yang sesuai.
• Tidak menghalangi item yang harus dilihat.
• Mudah ditutup (dibuat menghilang).
• Jelas penyelesaian/pembatalannya.

Contoh Kotak Dialog





Contoh Kotak Dialog




Sumber :
http://blog.unsri.ac.id/userfiles/SDISM.pdf
http://bbogel.blogspot.com/2010/07/organisasi-semantik-menu-binary-menus.html



Salam Tecom-C...........
Siiiiappp.........

Sistem WYSIWYG

Konstruksi teknis pada Sistem WYSIWYG yang digunakan sebagai media interaksi manusia dan komputer.

WYSIWYG adalah singkatan dari What You See is What You Get.
Ini adalah salah satu dari prinsip design dalam membangun/meranacang interface dari sebuah aplikasi.
WYSIWYG menunjukkan korespondensi antara informasi yang ada di Layar/Monitor dengan apa yang kita dapat pada saat Outputan Print.. misal, jika kita Mengetik huruf A yang keluaran di layar adalah huruf A dan kemudian jika di Print ya Hasilnya juga Huruf A. konsep inilah yang dikatakan Apa yang Kamu Lihat ya itu yang Kamu Dapatkan.
WYSIWYG disebut pengolah kata apapun yang bisa secara akurat menunjukkan jeda baris pada tampilan layar. Later WYSIWYGs had to be able to show different font sizes, even if the screen display was limited to one typeface . WYSIWYGs nanti harus dapat menampilkan berbagai ukuran font, meskipun tampilan layar yang terbatas pada satu typeface. Now, a word processor must be able to display graphics and many different typefaces to be considered WYSIWYG. Sekarang, kata prosesor harus dapat menampilkan gambar dan berbagai typefaces WYSIWYG yang akan dipertimbangkan.
Still, some WYSIWYG applications are more WYSIWYG than others. Meski demikian, beberapa aplikasi WYSIWYG WYSIWYG lebih dari orang lain. For example, many desktop publishing systems print text using outline fonts ( PostScript fonts, for example). Misalnya, banyak desktop publishing sistem mencetak teks menggunakan font outline (PostScript font, misalnya). Many of these systems, however, use corresponding bit-mapped fonts to display documents on a monitor . Banyak dari sistem ini, namun, sesuai menggunakan bit-mapping font untuk menampilkan dokumen di monitor. What you see on the display screen, therefore, is not exactly what you see when you print out the document. Apa yang anda lihat pada tampilan layar, karena itu tidak tepat apa yang Anda lihat ketika Anda mencetak dokumen. In addition, standard laser printers have a resolution of at least 300 dpi , whereas even the best graphics monitors have resolutions of only 100 dpi. Selain itu, standar printer laser memiliki resolusi minimal 300 dpi, sedangkan yang terbaik bahkan monitor grafis yang hanya memiliki resolusi 100 dpi. Graphics and text, therefore, always look sharper when printed than they do on the display screen. Grafis dan teks, karena itu, selalu terlihat ketika dicetak curang daripada yang mereka lakukan pada tampilan layar. And colors often appear differently on a monitor than they do when printed out. Dan warna yang sering muncul pada monitor berbeda dari yang mereka lakukan ketika keluar dicetak.


Sumber :
http://amynote.wordpress.com/2009/05/22/apa-itu-wysiwyg/



Salam Tecom-C...........
Siiiiappp.........

Karakteristik knowledge user

Konstruksi teknis pada Karakteristik knowledge user yang digunakan sebagai media interaksi manusia dan komputer.

User Physchology Characteristic:
Cognitive Style
• Verbal/analytic
• Spatial/Intuitive

Attitude
• Positive
• Neutral
• Negative

Motivation
• High
• Moderate
• Low

Dari uraian di atas kita dapat mengetahui tujuan akhir dari desain aplikasi adalah easy learning agar mudah digunakan oleh user.

User Knowledge and Experience
• Data dan informasi yang terdapat pada aplikasi sangat sederhana, karena disesuaikan dengan pengetahuan dan pengalaman user.
• Seperti aplikasi telepon genggam pada umumnya aplikasi ini tidak memerlukan typing skill yang baik, karena disesuaikan dengan keypad telepon genggam.

User Job and Task Characteristic
• Frequency of use - Low
• Task Importance - Low
• System Use


Sumber :
http://bbogel.blogspot.com/2010/07/organisasi-semantik-menu-binary-menus.html
http://nikoseptianto.blogspot.com/2010/02/interaksi-manusia-dan-komputer.html


Salam Tecom-C...........
Siiiiappp.........

GuideLine Preview

Konstruksi teknis pada GuideLine Preview yang digunakan sebagai media interaksi manusia dan komputer.


Guideline Preview adalah pedoman pengembangan perangkat lunak yang menawarkan rekomendasi pengembangan suatu aplikasi. Tujuan nya adalah untuk meningkatkan pengalaman bagi para pengguna dengan membuat interface aplikasi yang intuitif, mudah di pelajari, dan konsisten. Kebanyakan dari panduan membatasi diri untuk mendefinisikan tampilan umum dan hanya pada tampilan tertentu.Panduan ini memiliki kebijakan khusus, yang kadang-kadang didasarkan pada studi tentang interaksi manusia-komputer. Namun sebagian besar didasarkan konvensi sewenang-wenang dipilih oleh si pengembang.

Pedoman antarmuka ini akan menentukan seperangkat aturan untuk kegunaan umum. Ini juga sering digunakan untuk menentukan bagaimana masukan dan interaksi pengguna secara mekanisme cara kerjanya. Sebuah guideline kadang-kadang akan mendefinisikan terminologi standar dan semenarik mungkin. Berhubungan dengan unsur-unsur tertentu atau tindakan tertentu. Karena sebagian besar masalah pengguna berasal dari suatu aplikasi, dan ini merupakan suatu kelemahan untuk interface ini.

Versi yang paling penting adalah untuk dilakukan untuk kelompok-kelompok atau aplikasi. Dalam hal ini juga akan membangun suatu interface dengan menambahkan interface untuk berbagai fungsi. Tujuan utamanya adalah untuk menciptakan suatu kebiasaan yang konsisten di semua aspek (umumnya sebuah sistem operasi pada sistem operasi). Ini berarti baik jika menerapkan desain visual yang sama dan konsisten untuk menciptakan akses dan perilaku elemen umum dari suatu interface. Seperti penambahan tombol dan ikon sampai yang lebih komplek seperti kotak dialog.

Guideline Preview di rekomendasi kan untuk membantu pengembangan agar dalam pembuatan suatu aplikasi menjadi lebih baik. Pengembang kadang-kadang sengaja memilih untuk diam jika mereka berpikir bawah pedoman ini tidak sesuai dengan apa yang mereka inginkan.


Sumber :

http://en.wikipedia.org/wiki/Human_interface_guidelines


Salam Tecom-C...........
Siiiiappp.........

Selasa, 25 Mei 2010

Profile

Nama : Agung Rizki Hidayat
Nickname : Ajund
E-mail : ajund_dajjal@yahoo.co.id
Universitas : PKN & STMIK LPKIA Bandung
Konsentrasi : Tekhnik Informatika
Kelas : 1 TI 5
Mata Kuliah : Teori Struktur Data
Nama Dosen : Dadan Nurdin Bagenda S.T.
Judul Tugas : Rangkuman Bahasn Materi sebelum UTS


SaLaM TeCom-C..
Siiiap...!!!!