§ Kelebihan: Waktu pembelajaran user sangat singkat, feedback langsung diberikan pada tiap aksi sehingga kesalahan terdeteksi dan diperbaiki dengan cepat
§ Kekurangan : Interface tipe ini rumit dan memerlukan banyak fasilitas pada sistem komputer, cocok untuk penggambaran secara visual untuk satu operasi atau objek
2) Menu selection
Pilihan berbentuk menu: Memilih perintah dari daftar yang disediakan. Misalnya saat click kanan dan memilih aksi yang dikehendaki.
§ Kelebihan: User tidak perlu ingat nama perintah. Pengetikan minimal. Kesalahan rendah.
§ Kekurangan:Tidak ada logika AND atau OR. Perlu ada struktur menu jika banyak pilihan. Menu dianggap lambat oleh expert user dibanding command language.
3) Form fill-in
Pengisian form : Mengisi area-area pada form. Contoh: Stock control.
§ Kelebihan: Masukan data yang sederhana. Mudah dipelajari
§ Kekurangan: Memerlukan banyak tempat di layar. Harus menyesuaikan dengan form manual dan kebiasaan user.
4) Command language
Perintah tertulis: Menuliskan perintah yang sudah ditentukan pada program.
Contoh: operating system.
§ Kelebihan: Perintah diketikan langsung pada system. Misal UNIX, DOS command. Bisa diterapkan pada terminal yang murah.Kombinasi perintah bisa dilakukan. Misal copy file dan rename nama file.
§ Kekurangan: Perintah harus dipelajari dan diingat cara penggunaannya tidak cocok untuk user biasa.Kesalahan pakai perintah sering terjadi. Perlu ada sistem pemulihan kesalahan.Kemampuan mengetik perlu.
5) Natural language
Perintah dengan bahasa alami: Gunakan bahasa alami untuk mendapatkan
hasil. Contoh: search engine di Internet.
§ Kelebihan: Perintah dalam bentuk bahasa alami, dengan kosa kata yang terbatas (singkat) misalnya kata kunci yang kita tentukan untuk dicari oleh search engine Ada kebebasan menggunakan kata-kata.
§ Kekurangan: Tidak semua sistem cocok gunakan ini. Jika digunakan maka akan memerlukan banyak pengetikan
b. Information Presentation (Penyajian Informasi )
Sistem yang interaktif pasti menyediakan cara untuk menyajikan informasi untuk pengguna. Penyajian informasi bisa berupa penyajian langsung dari input yang diberikan (seperti teks pada word processing) atau disajikan dengan grafik.
Beberapa faktor berikut adalah hal yang perlu diperhatikan sebelum menentukan bentuk penyajian informasi:
ü Apakah pengguna perlu informasi dengan ketepatan tinggi atau data yang saling berhubungan?
ü Seberapa cepat nilai informasi berubah? Harus ada indikasi perubahan seketika?
ü Apakah pengguna harus memberi respon pada perubahan?
ü Apakah pengguna perlu melakukan perubahan pada informasi yang disajikan?
ü Apakah informasi berupa teks atau numerik? Nilai relatif perlu atau tidak? Informasi bisa bersifat statis atau dinamis ketika disajikan, masing-masing baik dengan karakteristik yang berbeda dan kebutuhan yang berbeda pula:
1) Static information:
Ditentukan saat awal sesi. Tidak berubah selama sesi berjalan. Bisa berupa informasi numeris atau teks Chart di MS-Excel. Disajikan dengan jenis huruf khusus yang mudah dibaca atau diberi highlight dengan warna tertentu seperti pada Gambar 4 atau menggunakan icon yang mewakili
2) Dynamic information:
§ Perubahan terjadi selama sesi berlangsung dan perubahan harus dikomunikasikan/ditunjukkan ke user.
§ Bisa berupa informasi numeris atau teks. Contoh : Defragmentation, scanning virus, download
Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan hubungan antar gambar, data bisa berubah dengan cepat. Seperti pada Gambar 2, informasi yang sama disajikan dengan dua cara yang berbeda. Jika yang dibutuhkan adalah hubungan antar data pada bulan-bulan tersebut, maka informasi dengan grafik memberikan informasi tentang hubungan tersebut lebih cepat dari pada informasi yang disajikan dengan teks dan numerik. Informasi dengan numerik dapat juga disajikan dengan cara digital atau analog dengan karakteristik sebagai berikut:
§ Digital presentation
Ø Singkat – hanya perlu sedikit tempat pada layar
Ø Ketepatan nilai ditunjukkan
§ Analogue presentation
Ø Nilai terlihat sambil lalu
Ø Untuk menunjukkan nilai relatif
Ø Mudah melihat data nilai yang berbeda
Gambar 1. Alternatif presentasi
Nilai-nilai relatif misalnya seperti pada Gambar 3. Selain nilai yang disajikan relatif, informasinya bersifat dinamis, karena berubah saat sesi berjalan. Untuk nilai digital kita biasanya gunakan untuk menunjukkan jam pada jam. sistem di komputer. Selain ketepatan diperlukan, perubahannya tidak terjadi secara cepat.
Gambar 2. Informasi yang dinamis dan nilai relatif
Gambar 3. Textual
Highlighting Penggunaan Warna pada desain Interface
ü Warna menambah dimensi ekstra pada suatu interface dan membantu user memahami struktur yang kompleks
ü Bisa dipakai untuk mewarnai-terang (higlight) hal-hal khusus
ü Menggunakan warna untuk mengkomunikasikan arti merah bisa jadi peringatan atau ada kesalahan
ü Terlalu banyak gunakan macam warna
Dalam menggunakan warna pada desain interface ada beberapa petunjuk yang dapat diikuti seperti berikut ini:
ü Hindari penggunaan terlalu banyak warna
ü Gunakan kode warna untuk mendukung operasi
ü Pengguna bisa kendalikan warna untuk kode
ü Desain monochrome kemudian tambahkan warna
ü Gunakan warna kode secara konsisten
ü Hindari pasangan warna yang tidak cocok/norak
ü Gunakan warna untuk menunjukkan perubahan status
1. Prinsip perancangan User Interface
User interface desain adalah desain komputer, peralatan, mesin, perangkat komunikasi mobile, aplikasi perangkat lunak, dan situs web yang menitikberatkan pada pengalaman pengguna dan interaksi. Tujuan dari user interface design adalah membuat interaksi pengguna lebih sederhana dan efisien. Prinsip prinsip dalam perancangan user interface antara lain sebagai berikut:
1. User Compatibility
Perancang sistem harus benar-benar paham tentang pengetahuan, cara berpikir dan cara menerima informasi dari user sehingga sistem yang akan digunakan oleh user dapat membuat user lebih produktif. Harus diperhatikan juga adalah bahwa karakteristik perancang (designer) atau developer tidak sama dengan karakteristik user.
2. Product Compatibility
Selalu memperhatikan dan mempertahankan kompatibilitas antar produk, misalnya mampu mengorbankan User Interface yang memungkinkan sistem lebih kompatibel.
3. Task Compatibility
Rancangan interface sistem harus sesuai dengan tugas dari user. User tidak boleh mengalami kesulitan untuk menggunakannya. Hal tersebut dapat menyebabkan aplikasi yang dibuat tidak akan terpakai dan akhirnya tidak dapat membantu pekerjaan / tugas user.
4. Work Flow Compatibility
Selalu mengorganisasikan setiap fungsi sesuai dengan kategori fungsinya sehingga dapat memfasilitasi segala perubahan tugas user.
5. Consistency
Sistem harus konsisten terhadap fungsionalitas atau kegunaan dari sistem tersebut. Contoh sederhananya adalah ketika user menekan tombol “save” maka proses yang terjadi adalah penyimpanan bukan hapus data.
6. Familiarity
Menggunakan konsep, terminologi dan pengaturannya yang mudah dipahami oleh user. Seperti ikon atau gambar “Recycle Bin” pada Sistem
Operasi Windows, ini membuktikan bahwa fokus user terhadap gambar tersebut adalah file-file yang sudah dihapus sebelumnya.
7. Simplicity
Kompleksitas suatu aplikasi akan menimbulkan frustasi pada user itu sendiri, maka dari itu gunakan system default pada aplikasi yang dirancang. Maksudnya adalah sediakan dan utamakanlah fungsi – fungsi yang benar-benar sesuai dengan tugas dari user. Usahakan agar tidak menampilkan semua fungsionalitasnya.
8. Direct Manipulation
user harus dapat langsung menyaksikan aksi sistem pada suatu objek. Contoh sederhana, pada saat kita menekan mengetikkan huruf “A” maka di layar akan langsung muncul huruf “A”.
Control: Sistem yang digunakan oleh user jangan membuatnya frustasi dan dikontrol. Seperti memberikan komentar pada saat user melakukan kesalahan dengan bahasa yang tidak membuat user merasa dikontrol oleh sistem tersebut.
WYSIWYG (What You See Is What You Get), artinya adanya korespondensi satu ke satu antara informasi di layar dengan informasi di printed-output atau file. Contoh, pada saat membuat laporan menggunakan Microsoft Office lalu mencetaknya (print out) laporan tersebut, maka hasil print out harus sama dengan yang ada pada lembar kerja Microsoft Office.
10. Flexibility
Prinsip ini merupakan prinsip yang sangat penting bagi user dengan keterbatasan fisik. Ini berarti mengijinkan banyak kontrol dari user yang mendukung untuk menggunakan aplikasi yang kita rancang dan mampu mengakomodir kemampuan user yang lain. Seperti aplikasi yang dapat didukung oleh perangkat lain (mouse, keyboard, joystick,trackball).
11. Responsiveness
Sistem harus selalu merespon dengan cepat apa yang di inputkan oleh user. Seperti menampilkan Progress Bar.
12. Invisible Technology
Menyembunyikan detail teknis dari suatu sitem merupakan hal yang sangat direkomendasikan dalam membuat User Interface. Sehingga user tidak memiliki rasa khawatir dan ketakutan untuk menggunakan aplikasinya.
13. Robustness
Sistem harus mampu mentolerir kesalahan manusia baik disengaja maupun tidak disengaja dan yang umunya tidak dapat dihindari. Menyediakan Recovery System merupakan hal yang baik untuk mengimplementasikan prinsip ini.
14. Protection
Prinsip ini berbeda dengan prinsip Robustness, karena pada prinsip ini sistem seharusnya memproteksi kesalahan-kesalahan umum manusia. Seperti pada saat kita menutup lembar kerja Microsoft Office yang belum kita simpan sebelumnya, maka Office akan secara otomatis memberikan konfirmasi untuk menyimpannya atau tidak.
15. Ease of Learning
Antar muka sistem harus mudah dipelajari bagi user novice (pengguna umum). Hal ini akan memberikan motivasi kepada user tersebut untuk menggunakannya.
16. Ease of Use
Antar muka sistem harus mudah digunakan untuk expert user. Sehingga sistem yang dibangun tidak hanya dipakai untuk novice user tetapi bisa juga dipakai untuk user yang sudah ahli (berpengalaman).
3. Komponen user interface dialog
User-action notation (UAN) Pendekatan tata bahasa dan diagram untuk spesifikasi cocok untuk menu, perintah, atau pengisian formulir, tapi semua itu tidak cocok untuk interface manipulasi langsung, karena semua itu tidak dapat mencakupi variasi aktivitas dan timbal balik visual yang disediakan system. Sebagai
tambahan, interface manipulasi langsung sangat bergantung pada konteks untuk menentukan arti dari sebuah masukan. Sebagai contoh, sebuah penekanan pada mouse dapat berarti pemilihan sebuah file, membuka sebuah window, atau memulai sebuah aplikasi, tergantung di mana kursor berada ketika penekanan diaplikasikan. Dengan konteks yang sama, sulit untuk mengkarakterisasikan hasil dari pemindahan ikon, karena hal ini tergantung dari apa yang dipindahkan.
UAN memiliki symbol yang spesifik untuk interface untuk aktivitas-aktivitas, dan untuk konkurensi dan timbal balik. Simbol-simbol ini dipilih untuk merepresentasikan aktivitas-aktivitas. UAN tidak dapat menspesifikasikan dengan baik grafik yang lengkap, seperti menggambarkan programm atau animasi, hubungan antara tugas, dan interupsi dari behaviour. Tapi bagaimanapun, UAN adalah sebuah pendekatan tingkat tinggi dan kuat untuk menspesifikasikan behaviour sistem dan mendeskripsikan aktivitas-aktivitas pemakai.
User Interface mencakup semua aspek penghubung antara pemakai dengan
system. Yang ternasuk hardware, software, pengguna, aksesibilitas, interaksi
manusia dan komputer. Untuk mengelola UI digunakan User Interface
Management System (UIMS).
Focus utama dari UIMS:
ü Arsitektur konseptual untuk struktur dari system interaktif yang dikonsentrasikan pada pemisahan semantic aplikasi dan presentasi.
ü Teknik untuk mengimplementasikan aplikasi dan presentasi secara terpisah.
ü Teknik pendukung untuk menangani, mengimplementasikan, dan mengevaluasi lingkungan interaksi yang sedang berjalan.
a. Komponen logika dari UIMS
Secara konseptual, ada 3 komponen utama dari system interaktif aplikasi, presentasi dan control dialog.
ü Presentasi
Komponen bertanggungjawab atas tampilan interface, termasuk output dan input yang tersedia bagi user.
ü Control dialog
Komponen mengatur komunikasi antara presentasi dan aplikasi.
ü Interface aplikasi
Pandangan dari semantic aplikasi yang disediakan sebagai interface.
b. Kategori ragam dialog
Secara umum, ragam dialog interaktif dapat dikelompokkan menjadi 9 kategori, yaitu:
Ø Dialog berbasis perintah tunggal (command line dialogue)
Ø Dialog berbasis bahasa pemrograman (programming language dialogue)
Ø Antarmuka berbasis bahasa alami (natural languange interface)
Ø Sistem Menu
Ø Dialog berbasis pengisian borang (form filling dialogue)
Ø Antarmuka berbasis ikon
Ø Sistem Penjendelaan (windowing system)
Ø Manipulasi Langsung (direct manipulation)
Ø Antarmuka berbasis interaksi grafis
4. Sekuensial User-Interface
Dua pendekatan yang digunakan untuk menjelaskan urutan akses komponen dari user interface yaitu diagram transisi dan statechart.
a. Diagram Transisi
Umumnya sebuah diagram transisi memiliki sekumpulan nodes yang merepresentasikan status sistem dan sekumpulan hubungan antara nodes yang merepresentasikan transisi yang mungkin. Setiap hubungan diberi label dengan aktivitas user yang memilih hubungan tersebut dan respon computer yang mungkin ada. Diagram transisi yang sederhana dalam Gambar 4 merepresentasikan sejumlah sistem pemilihan menu untuk tampilan sebuah restoran yang menunjukan apa yang terjadi ketika pemakai memilih sejumlah pilihan:
1) Menambah sebuah restoran ke daftar.
2) Menyediakan sebuah tampilan dari sebuah restoran.
3) Membaca sebuah tampilan.
4) Memperoleh bantuan
5) Keluar, atau karakter lainnya (pesan kesalahan).
Gambar 4 Contoh diagram transisi
Diagram transisi diterjemahkan langsung ke dalam finite-state automata, yang dipelajari dengan baik dalam ilmu komputer. Beberapa properti dapat diverifikasi secara otomatis, seperti reachability (apakah ada kemungkinan jalan untuk mencapai semua state) Atau keaktifan (apakah ada jalan keluar dari semua state? ). Namun, sifat yang berpusat pada pengguna seperti visibilitas status sistem sangat sulit untuk diungkapkan dan diverifikasi dalam hal automata.
Gambar 5. Contoh diagram transisi tindakan manipulasi-manipulasi. Label tautan menunjukkan seberapa sering setiap transisi dibuat
Sayangnya, diagram transisi tidak sesuai dengan system yang semakin berkembang, dan terlalu banyak transisi yang dapat menyebabkan tampilan yang rumit. Peningkatannya dapat dilakukan dengan menggantikan sebuah node dari transisi status dengan sebuah tampilan cetakan untuk memberikan tampilan bahwa ada perpindahan melalui tampilan dan kotak dialog. Penjelasan semacam ini berguna dalam perancangan dan pelatihan. Perancangan untuk interface dengan ratusan kotak dialog, atau website dengan ratusan tampilan, lebih mudah untuk dipelajari ketika digunakan.
b. Statecharts
Walaupun diagram transisi efektif untuk alur atau aksi dan untuk menelusuri jejak dari status, semua itu dapat dengan cepat menjadi luas dan memusingkan. Modularitas memungkinkan jika nodes ada bersama subgraph, tapi strategi ini bekerja dengan baik hanya secara berurutan. Diagram transisi juga menjadi memusingkan ketika setiap node harus menunjukan hubungan ke sebuah status bantuan, melompat ke status sebelumnya, dan sebuah status keluar. Konkurensi dan sinkronisasi kurang dapat direpresentasikan oleh diagram transisi,
walaupun beberapa variasi seperti petri-nets dapat membantu. Alternative yang dapat mengatasi masalah ini adalah statecharts, yang memiliki beberapa kebaikan untuk menspesifikasikan interface . Karena sebuah fitur pengelompokan ditawarkan melalui lingkaran yang bersarang, transisi yang berulang dapat difaktorkan ke luar lingkaran.
Penambahan lainnya dalam statecharts seperti konkurensi, kejadian dari eksternal, dan aksi dari pemakai direpresentasikan di dalam Statemaster, yang merupakan sebuah peralatan User Interface berdasarkan statecharts. Statecharts juga dapat diperluas dengan alur data dan spesifikasi batasan.
Gambar 6. Statechart dari sistem transaksi bank yang disederhanakan
menunjukkan pengelompokan state.
5. Simulasi (mock-up) dari aplikasi yang akan dibuat
Mock-up adalah sebuah bentuk realistis dari sebuah karya digital, bertujuan untuk pemanis atau menjadi contoh nyata bagaimana sebuah karya digital bekerja, sebelum benar – benar dicetak, biasanya untuk klien atau calon klien dan bertujuan untuk presentasi sebuah karya. Perancang seharusnya membuat dokumentasi akan bentuk-bentuk tampilan yang akan diimplementasikan. Peranti bantu sederhana yang dapat digunakan misalnya adalah lembar kerja tampilan/LKT (screen design work sheet). Pada LKT, disajikan empat bagian:
Ø Nomor lembar kerja
Ø Bagian tampilan
Ø Bagian navigasi
Ø Bagian keterangan
Gambar 7. Contoh screen design work sheet
a. Interface mockup tools
Dalam membuat sketsa user interface diperlukan waktu yang cepat sebagai tahap awal desain untuk mengeksplorasi banyak alternatif, untuk memungkinkan komunikasi dalam tim desain, dan untuk menyampaikan kepada klien seperti apa produk itu. User interface dapat dibuat dengan kertas dan pensil, pengolah kata, atau perangkat lunak presentasi slide-show (seperti Microsoft PowerPoint atau Apple Keynote). Perancang yang ahli juga telah membuat prototip antarmuka pengguna dengan alat konstruksi multimedia, seperti Macromedia Director, Flash MX Dreamweaver, visio, balsamiq, iplotz, wireframe dan lain-lain. Program ini dapat dengan cepat menghasilkan program animasi atau bahkan interaktif dan didistribusikan melalui Web. Berikut ini beberapa contoh interface mokup tool.
1) Balsamiq
Balsamiq Mockup Tools merupakan aplikasi terbaik menurut saya, untuk membuat sketsa gambar Blueprint sebuah blog ataupun website. Cara penggunaannya pun cukup mudah, hanya tinggal tarik dan letakan. Jika ingin menambahkan gambar tinggal drop and drag saja sesuai keinginan. Fitur lainnya pun dengan mudah kita gunakan.
Gambar 8. Balsamiq
2) Microsoft Visio
Microsoft Visio ini sangatlah mudah untuk digunakan, fitur yang lengkap membuat kita tidak perlu lagi mencari gambar yang ingin kita gunakan dalam pembuatan mockup sebuah website ataupun blog. Kelebihan Visio adalah kemampuan diagram teknis dari pada pembuatan mockup.
Gambar 9. Microsoft Visio
b. Software-engineering tools
Programer yang berpengalaman terkadang membangun user –interface dengan bahasa pemrograman dengan tujuan umum seperti Java, C #, atau C ++, namun pendekatan ini memberikan cara untuk menggunakan perangkat lunak yang secara khusus disesuaikan dengan pengembangan user-interface dan akses web. Memilih di antara Integarted Development Environtmen (IDE) terkadang merupakan tugas yang rumit dan membingungkan, karena kurangnya istilah seragam yang digunakan untuk mendeskripsikan alat dan fiturnya. Ada sejumlah besar alat yang tersedia untuk membangun user-interface. Tabel 1 mencantumkan empat lapisan perangkat lunak yang dapat digunakan untuk membangun antarmuka pengguna dan alat interaktif terkait mereka. Alat tingkat tinggi (layer 4) adalah generator user-interface, kadang-kadang disebut sistem manajemen user-interface atau alat bangunan berbasis model. Sebagian besar jika tidak semua aplikasi dapat dibangun kembali dengan cepat menggunakan alat yang ada. Namun, alat ini saat ini hanya tersedia untuk kelas aplikasi kecil, seperti database front-ends (Microsoft Access, Sybase PowerDesigner); atau tetap menjadi prototip penelitian. Gambar 10 merupakan beberapa contoh IDE.
Gambar 10 Contoh software engineering tool Microsoft Visual Studio
Microsoft Visual Studio dapat digunakan untuk mengembangkan aplikasi dalam native code (dalam bentuk bahasa mesin yang berjalan di atas Windows) ataupun managed code (dalam bentuk Microsoft Intermediate Language di atas .NET Framework). Selain itu, Visual Studio juga dapat digunakan untuk mengembangkan aplikasi Silverlight, aplikasi Windows Mobile (yang berjalan di atas .NET Compact Framework).
Gambar 11 Contoh software engineering tool NetBeans
Netbeans adalah sebuah aplikasi Integrated Development Environment (IDE) yang berbasiskan Java dari Sun Microsystems yang berjalan di atas swing. Swing merupakan sebuah teknologi Java untuk pengembangan aplikasi dekstop yang dapat berjalan pada berbagai macam platform seperti windows, linux, Mac OS X dan Solaris. Sebuah IDE merupakan lingkup pemrograman yang di integrasikan ke dalam suatu aplikasi perangkat lunak yang menyediakan Graphic User Interface (GUI), suatu kode editor atau text, suatu compiler dan suatu debugger.
Tabel 1 Empat layer perangkat lunak yang tersedia untuk membangun user-interface
B. Keterampilan yang diperlukan dalam Mengidentifikasi Rancangan User Interface
1. Mengidentifikasi kebutuhan rancangan user interface
2. Mengidentifikasi komponen user interface yang akan digunakan
3. Mengatur urutan akses komponen user interface
4. Membuat simulasi mockup menggunakan interface mockup tool dan software engineering tool.
C. Sikap kerja yang diperlukan dalam Mengidentifikasi Rancangan User Interface
1. Menunjukkan hasil identifikasi rancangan user interface secara cermat, tepat, teliti dan sesuai kebutuhan
2. Menyajikan hasil identifikasi rancangan user interface secara cermat, tepat, teliti dan sesuai konteks rancangan proses. sesuai kebutuhan
3. Menunjukkan urutan dari akses komponen user interface dialog secara cermat, tepat, teliti sesuai kebutuhan
4. menyajikan hasil pembuatan simulasi simulasi (mock-up) dari aplikasi yang akan dikembangkan secara cermat, tepat, teliti sesuai kebutuhan.
0 Komentar