"User Testing Report"

UNIVERSITI MALAYSIA SARAWAK

FAKULTI SENI GUNAAN DAN KREATIF

SEMESTER 1 SESI 2010/2011

GKG 3013 REKABENTUK LAMAN WEB

 

“User Testing Report”

Nama: Shah Jhihan Bin Abdullah

No.matrik : 22260

Program: Teknologi Seni Reka (Seni reka Industri)

PENSYARAH:

Cik. Salmiah Bt. Abdul Hamid.

ISI KANDUNGAN

PERKARA   

Pengenalan.

1.    Konsep rekabentuk

2.    Pengalaman pengguna (User Experience)

3.    Permukaan design (Interface Design)

4.    Komen pengguna.
5.Masalah yang dihadapi.

Kesimpulan.

Pengenalan.

Laman web Kuching Design Week 2011 Festival yang berkonsepkan kepulauan Borneo ini dibuat adalah sebagai projek pertama untuk kursus GKG 3013 REKABENTUK LAMAN WEB yang perlu dibuat oleh setiap pelajar teknologi senireka. Laman web yang telah siap dibuat perlu membuat percubaan daripada pengguna. Setiap laman yang dibuat perlu di komen oleh pengguna untuk membuat laporan “user testing”. Oleh itu beberapa orang rakan telah dipilih sebagai pengguna yang akan memberi komen pada laman web yang telah dibuat.

Setiap pengguna perlu melihat pada setiap laman dan penggunaan link dan “interface” yang telah dibuat. Pengguna yang telah melihat setiap laman akan membuat komen pada laman web yang telah dibuat untuk memastikan web yang dibuat memenuhi ciri-ciri semertimana yang telah dipelajari.

Segala yang telah dibuat dalam laman web tersebut akan mendapat mendapat maklumbalas daripada pengguna yang telah menggunakannya. Dan seterusnya perojek rekabentuk laman web (Kuching Design Web 2011 Festival) ini akan dinilai oleh pensyarah yang akan memberi markah keseluruhan dalam setiap proses rekabentuk laman web yang telah dibuat, sepertimana yang dikehendaki oleh pensyarah.

1.   Konsep rekabentuk.

Dalam konsep rekabentuk, pengguna mengatakan bahawa konsep yang digunakan ini adalah untuk menunjukkan identiti negeri Sarawak dan kepulauan Borneo. Sepertimana yang dilihat pada rekabentuk laman web yang lain, laman web ini mempunyai kelainan dari segi penggunaan warna dan rekaletak gambar dan font.

            Setiap laman mempunyai “interface” yang sama hanya tajuk sahaja yang berbeza. Bagi bahagian “sponsors”, setiap logo pada web mempunyai link untuk melihat laman web “sponsors” tersebut. Bagi laman-laman yang lain hanyalah mempunyai gambar dan maklumat.

            Konsep yang sama digunakan pada setiap laman dan “interface” adalah konsisten dengan setiap laman untuk memudahkan pengguna membaca dan melihat gambar yang tertera.

            Manakala pada setiap text yang ada di dalam web ini boleh diedit semula apabila mahu membuat perubahan pada text atau maklumat yang berkaitan, dimana boleh ditambah atau dipadam jika diperlukan. Ini akan memudahkan lagi kerja apabila mahu mengubah gambar atau text, kita tidak perlu mengubah pada keseluruhan “interface”. Jumlah keseluruhan laman pada web ini ialah lapan paparan muka yang terdiri daripada, “HOME, PRESIDENT, STAFF BIOS, SPONSORS, WEB & BLOG, PHOTO GALLERIES, LOCATION MAP, CONTACT US”.

2.   Pengalaman pengguna (User Experience)

Melalui penggunaan laman web ini, pengguna akan mendapat informasi tentang Kuching Design Week 2011 Festival. Seterusnya pengguna akan membuat pilihan untuk melihat isi kandungan yang terdapat di dalam laman web ini dengan mengklik pada link yang terdapat pada setiap paparan muka.

Pengguna yang melawat pada setiap laman boleh kembali pada “home” dengan mengklik sahaja pada link home. Hal ini dapat mengelakkan pengguna daripada terperangkap di mana-mana laman dan ini yang perlu ada pada setiap laman web iaitu pandu arah yang betul.

Setiap pengguna yang menggunakan laman web ini mengatakan tiada apa-apa masalah tentang link yang dibuat kerana mereka tidak teperangkap atau sesat di mana-mana laman yang terdapat di dalam web ini. Pengguna yang telah cuba menggunakan laman web ini member maklum balas yang baik dan memuaskan.

3.   Permukaan design (interface design)

  

Dalam rekabentuk laman web ini, rekaan yang dibuat adalah ringkas dan mudah yang bertujuan untuk setiap pengguna memahami setiap langkah dan penggunannya. Oleh itu, laman ini sesuai digunakan oleh setiap golongan lapisan masyarakat. 
Antara lement yang perlu terkandung dalam sesebuah laman web ialah:

Navigation Bar - Navigasi yang konsisten amat perlu untuk setiap     laman Web. Biasanya Navigation bar diletakkan di atas setiap mukasurat laman Web dan hendaklah konsisten antara satu muka dengan muka yang lain. Tidak kurang juga Navigation berada di sebelah tepi sesuatu laman Web. Terdapat juga laman Web yang membahagikan mukasurat mereka kepada dua bahagian: satu mengandungi Navigation bar dan satu lagi mengandungi isi kandungan yang hendak disampaikan. Rekabentuk begini menetapkan Navigator pada kedudukan asal walaupun butang Navigation berlainan ditekan. Navigation bar yang digunakan tidak terhad kepada teks sahaja. Penggunaan grafik akan menampakkan sesuatu laman Web itu lebih cantik dan menarik. Tidak kira anda menggunakan teks atau grafik apa yang penting ialah, setiap butang Navigation bar itu perlu mewakili sambungan-sambungan yang tertentu dengan jelas dan tidak mengelirukan pembaca. Jika perlu warnakan butang mukasurat yang sedang dilawati dengan warna yang berlainan dengan mukasurat-mukasurat lain atau buatkan ia sebagai butang tidak aktif. Sebagai tambahan masukkan  butang "back" dan "foward" ataupun "previous" dan "next" bagi menyenangkan pembaca. 

Mukasurat profil -  Sesetengah laman Web tidak mengandungi mukasurat berkenaan siapa mereka dan bagaimana cara pembaca boleh menghubungi mereka. Lebih menghairankan jika laman Web "misteri" itu terdiri dari mereka yang terlibat di dalam penjualan produk atau perkhidmatan. Pembaca tentu sekali berminat malah merasa lebih terjamin mengetahui tentang individu disebalik tabir. Pastikan terdapat sambungan di dalam laman Web anda yang membolehkan pembaca emel anda.

Borang komen - Ruangan komen membolehkan pembaca meminta maklumat diperlukan secara "online" dan tidak perlu menyalin nombor telefon dan menghubungi anda. Sebaliknya anda hanya  perlu menjawab sebarang pertanyaan melalui emel ataupun surat. Bukan setakat tempat mendapatkan informasi, ruangan ini juga bertindak sebagai alat untuk memperbaiki sebarang kelemahan yang terdapat di dalam laman Web. Juga dapat memperlengkapkan informasi-informasi di dalam laman Web berdasarkan komen-komen dari pembaca. 

Kandungan yang menyeronokkan - Pembaca berharap untuk memperolehi informasi yang dikehendaki apabila melawat sesuatu laman Web. Pereka harus membina laman Web yang dapat memberikan pembaca apa yang mereka mahu. gunakan ayat-ayat yang ringkas untuk menarik pembaca tanpa membebankan mereka dengan perkataan-perkataan yang susah. Jika perkataan-perkataan saintifik perlu digunakan, sediakan maksud perkataan itu sekali. Informasi yang lengkap akan menarik pembaca untuk kembali berkunjung ke laman Web tersebut. Ruangan yang disediakan dalam web adalah tidak terhad.

4.   Komen Pengguna.

Pengguna yang telah menggunakan laman web ini telah membuat beberapa komen, antara komen-komen yang diberikan adalah seperti berikut:

Ø  Penggunaan warna kurang menarik.

Ø  Tiada penggunaan falsh dan gambar yang bergerak.

Ø  Tiada video yang dipaparkan di dalam web.

Ø  Tiada penggunaan muzik atau sound pada web.

Ø  Kurang gambar-gambar yang menarik pengguna.

Ø  Kurang informasi yang perlu ada.

Ø  Laman web yang dibuat mudah dan ringkas.

5.   Masalah yang dihadapi.

Dalam membuat Laman web ini, terdapat beberapa masalah yang dihadapi dan perlu di atasi, antara masalah yang dihadapi ialah:

Ø Link yang dibuat pada proses permulaan tidak berfungsi.

Ø Gambar tidak dapat dipaparkan.

Ø Masalah dalam memasukkan gambar yang telah “slash”

Ø Tersalah dalam format yang dibuat dan terpaksa membuat semula laman web yang lain dengan format yang dikehendaki.

Ø Terlalu banyak link yang tidak dapat dibuat, dan terpaksa mengurangkan link dalam laman web ini.

Kesimpulan.

Laman web merupakan satu alat yang digunakan oleh umum untuk pengguna mendapat informasi tentang sesuatu perkara. Secara keseluruannya laman web yang telah dibuat ini sangat mudah dan ringkat untuk digunakan oleh pengguna dan juga mudah difahami. Pengguna dapat menggunakan web ini tanpa perlu diajar dan panduan dari sesiapa. Dengan hanya mengklik pada link-link yang ada di dalam laman web ini, pengguna boleh mendapat informasi tentang Kuching Design Week 2011 Festival.

WEB NAVIGATION (RENEW FORMAT)

WEB NAVIGATION (NEW)

WEB DESIGN INTERFACE (RENEW FORMAT)

Proposal WEB DESIGN

  

UNIVERSITI MALAYSIA SARAWAK

FAKULTI SENI GUNAAN DAN KREATIF

SEMESTER 1 SESI 2010/2011

GKG 3013 REKABENTUK LAMAN WEB

 

Proposal Rekabentuk Laman Web

Nama: Shah Jhihan Bin Abdullah

No.matrik : 22260

Program: Teknologi Seni Reka (Seni reka Industri)

PENSYARAH:

Cik. Salmiah Bt. Abdul Hamid.

ISI KANDUNGAN

PERKARA

• Definisi Rekabentuk laman web.

1. Objektif
2. Web Navigation
3. Konsep rekabentuk
4. Penggunaan Warna

• Kesimpulan

Definisi Rekabentuk Laman Web.

World Wide Web atau WWW atau lebih dikenali sebagai web merupakan perkhidmatan internet yang paling popular. Web merupakan satu perkhidmatan yang menghimpun maklumat. Lazimnya web mempunyai hiper pautan (hyperlinks) teks, imej grafik, audio dan video. Setiap halaman web mempunayi alamat yang unik. Alamat ini dikenali sebagai Uniform Resource Locator (URL). Setiap URL mengandungi dua bahagian utama iaitu protokol dan nama domain. Protokol yang lazim digunakan ialah http:// iaitu singkatan HyperText Transfer Protocol.

Antara yang terkandung dalam sesebuah laman web ialah:

Navigation Bar - Navigasi yang konsisten amat perlu untuk setiap laman Web. Biasanya Navigation bar diletakkan di atas setiap mukasurat laman Web dan hendaklah konsisten antara satu muka dengan muka yang lain. Tidak kurang juga Navigation berada di sebelah tepi sesuatu laman Web. Terdapat juga laman Web yang membahagikan mukasurat mereka kepada dua bahagian: satu mengandungi Navigation bar dan satu lagi mengandungi isi kandungan yang hendak disampaikan. Rekabentuk begini menetapkan Navigator pada kedudukan asal walaupun butang Navigation berlainan ditekan. Navigation bar yang digunakan tidak terhad kepada teks sahaja. Penggunaan grafik akan menampakkan sesuatu laman Web itu lebih cantik dan menarik. Tidak kira anda menggunakan teks atau grafik apa yang penting ialah, setiap butang Navigation bar itu perlu mewakili sambungan-sambungan yang tertentu dengan jelas dan tidak mengelirukan pembaca. Jika perlu warnakan butang mukasurat yang sedang dilawati dengan warna yang berlainan dengan mukasurat-mukasurat lain atau buatkan ia sebagai butang tidak aktif. Sebagai tambahan masukkan  butang "back" dan "foward" ataupun "previous" dan "next" bagi menyenangkan pembaca.

Mukasurat profil -  Sesetengah laman Web tidak mengandungi mukasurat berkenaan siapa mereka dan bagaimana cara pembaca boleh menghubungi mereka. Lebih menghairankan jika laman Web "misteri" itu terdiri dari mereka yang terlibat di dalam penjualan produk atau perkhidmatan. Pembaca tentu sekali berminat malah merasa lebih terjamin mengetahui tentang individu disebalik tabir. Pastikan terdapat sambungan di dalam laman Web anda yang membolehkan pembaca emel anda.

Borang komen - Ruangan komen membolehkan pembaca meminta maklumat diperlukan secara "online" dan tidak perlu menyalin nombor telefon dan menghubungi anda. Sebaliknya anda hanya  perlu menjawab sebarang pertanyaan melalui emel ataupun surat. Bukan setakat tempat mendapatkan informasi, ruangan ini juga bertindak sebagai alat untuk memperbaiki sebarang kelemahan yang terdapat di dalam laman Web. Juga dapat memperlengkapkan informasi-informasi di dalam laman Web berdasarkan komen-komen dari pembaca.

Kandungan yang menyeronokkan - Pembaca berharap untuk memperolehi informasi yang dikehendaki apabila melawat sesuatu laman Web. Pereka harus membina laman Web yang dapat memberikan pembaca apa yang mereka mahu. gunakan ayat-ayat yang ringkas untuk menarik pembaca tanpa membebankan mereka dengan perkataan-perkataan yang susah. Jika perkataan-perkataan saintifik perlu digunakan, sediakan maksud perkataan itu sekali. Informasi yang lengkap akan menarik pembaca untuk kembali berkunjung ke laman Web tersebut. Ruangan yang disediakan dalam web adalah tidak terhad.

"Web Design is the art and process of creating a single Web page or entire Web sites and may involve both the aesthetics and the mechanics of a Web site’s operation although primarily it focuses on the look and feel of the Web site. Some of the aspects that may be included in Web design or Web production are graphics and animation creation, color selection, font selection, navigation design, content creation, HTML/XML authoring, JavaScript programming, and ecommerce development."

1. Objektif

Projek rekabentuk laman web ini adalah bertujuan untuk memberi pengetahuan asas kepada pelajar yang mengikuti kursus GKG 3013 Rekabentuk Laman Web dalam menghasilkan sesebuah laman web yang boleh berfungsi dan dapat digunakan oleh pengguna lain. Dalam projek ini, para pelajar diajar cara-cara untuk menghasilkan sesebuah laman web dengan menggunakan perisian Adobe Dreamwever sebagai atat utama dalam membuat web. Selain itu, pelajar juga perlu mempraktikkan segala yang dipelajari dalam menghasilkan sebuah laman web (Kuching Design Week 2011 Festival).

    
 
2.  Web Navigation

3.  Konsep rekabentuk (Kuching Design Week 2011 Festival)

Konsep yang digunakan dalam laman web ini adalah motif Borneo serta sistem pencarian yang memudahkan pengguna. Web ini juga mempunyai Interface yang sama tetapi maklumat atau Content yang berbeza

Warna dapat didefinisikan secara objektif/fisik sebagai sifat cahaya yang dipancarkan, atau secara subyektif/psikologis sebagai bagian dari pengalaman indera pengelihatan. Secara obyektif atau fisik, warna dapat diberikan oleh panjang gelombang. Dilihat dari panjang gelombang, cahaya yang tampak oleh mata merupakan salah satu bentuk pancaran energi yang merupakan bagian yang sempit dari gelombang elektromagnetik.

Cahaya yang dapat ditangkap indera manusia mempunyai panjang gelombang 380 sampai 780 nanometer. Cahaya antara dua jarak nanometer tersebut dapat diurai melalui prisma kaca menjadi warna-warna pelangi yang disebut spectrum atau warna cahaya, mulai berkas cahaya warna ungu, violet, biru, hijau, kuning, jingga, hingga merah. Di luar cahaya ungu /violet terdapat gelombang-gelombang ultraviolet, sinar X, sinar gamma, dan sinar cosmic. Di luar cahaya merah terdapat gelombang / sinar inframerah, gelombang Hertz, gelombang Radio pendek, dan gelombang radio panjang, yang banyak digunakan untuk pemancaran radio dan TV. Proses terlihatnya warna adalah dikarenakan adanya cahaya yang menimpa suatu benda, dan benda tersebut memantulkan cahaya ke mata (retina) kita hingga terlihatlah warna.

Benda berwarna merah karena sifat pigmen benda tersebut memantulkan warna merah dan menyerap warna lainnya. Benda berwarna hitam karena sifat pigmen benda tersebut menyerap semua warna pelangi. Sebaliknya suatu benda berwarna putih karena sifat pigmen benda tersebut memantulkan semua warna pelangi. Sebagai bagian dari elemen tata rupa, warna memegang peran sebagai sarana untuk lebih mempertegas dan memperkuat kesan atau tujuan dari sebuah karya desain.

Dalam perencanaan corporate identity, warna mempunyai fungsi untuk memperkuat aspek identitas. Lebih lanjut dikatakan oleh Henry Dreyfuss , bahwa warna digunakan dalam simbol-simbol grafis untuk mempertegas maksud dari simbol-simbol tersebut . Sebagai contoh adalah penggunaan warna merah pada segitiga pengaman, warna-warna yang digunakan untuk traffic light merah untuk berhenti, kuning untuk bersiap-siap dan hijau untuk jalan. Dari contoh tersebut ternyata pengaruh warna mampu memberikan impresi yang cepat dan kuat. Kemampuan warna menciptakan impresi, mampu menimbulkan efek-efek tertentu.

Secara psikologis diuraikan oleh J. Linschoten dan Drs. Mansyur tentang warna sbb: Warna-warna itu bukanlah suatu gejala yang hanya dapat diamati saja, warna itu mempengaruhi kelakuan, memegang peranan penting dalam penilaian estetis dan turut menentukan suka tidaknya kita akan bermacam-macam benda. Dari pemahaman diatas dapat dijelaskan bahwa warna, selain hanya dapat dilihat dengan mata ternyata mampu mempengaruhi perilaku seseorang, mempengaruhi penilaian estetis dan turut menentukan suka tidaknya seseorang pada suatu benda. Berikut kami sajikan potensi karakter warna yang mampu memberikan kesan pada seseorang sbb :

Ø  Hitam, sebagai warna yang tertua (gelap) dengan sendirinya menjadi lambang untuk sifat gulita dan kegelapan (juga dalam hal emosi).

Ø  Putih, sebagai warna yang paling terang, melambangkan cahaya, kesucian.

Ø   Abu-abu, merupakan warna yang paling netral dengan tidak adanya sifat atau kehidupan spesifik.

Ø   Merah, bersifat menaklukkan, ekspansif (meluas), dominan (berkuasa), aktif dan vital (hidup), panas membara, peringatan, penyerangan, cinta.

Ø   Kuning, dengan sinarnya yang bersifat kurang dalam, merupakan wakil dari hal-hal atau benda yang bersifat cahaya, momentum dan mengesankan kebahagiaan, keceriaan dan hati-hati.

Ø  Biru, sebagai warna yang menimbulkan kesan dalamnya sesuatu (dediepte), sifat yang tak terhingga dan transenden, disamping itu memiliki sifat tantangan.

Ø  Hijau, mempunyai sifat keseimbangan dan selaras, membangkitkan ketenangan dan tempat mengumpulkan daya-daya baru, identik dengan pertumbuhan dalam lingkungan,pasukan perdamaian,kepuasan

Ø  Pink, warna yang identiti dengan wanita, menarik/cantik.

Ø  Orange, warna yang identiti dengan musim gugur.

Ø   Coklat, warna yang mengesankan hangat, identiti dengan musim gugur, kotor, bumi.

Ø  Ungu, warna yang identik dengan kesetiaan, kepuasan, Barney (tokoh boneka berwarna ungu)

Dari sekian banyak warna, dapat dibagi dalam beberapa bagian yang sering dinamakan dengan sistem warna Prang System yang ditemukan oleh Louis Prang pada 1876 atau disebut juga sebagai atribut warna meliputi :

1. Hue, adalah istilah yang digunakan untuk menunjukkan nama dari suatu warna, seperti merah, biru, hijau dsb.
2. Value, adalah dimensi kedua atau mengenai terang gelapnya warna. Contohnya adalah tingkatan warna dari putih hingga hitam.
3. Saturation/Intensity, seringkali disebut dengan chroma, adalah dimensi yang berhubungan dengan cerah atau suramnya warna.

Selain Prang System terdapat beberapa sistem warna lain yakni, CMYK atau Process Color System, Munsell Color System, Ostwald Color System, Schopenhauer/Goethe Weighted Color System, Substractive Color System serta Additive Color/RGB Color System. Diantara bermacam sistem warna diatas, kini yang banyak dipergunakan dalam industri media visual cetak adalah CMYK atau Process Color System yang membagi warna dasarnya menjadi Cyan, Magenta, Yellow dan Black. Sedangkan RGB Color System dipergunakan dalam industri media visual elektronika. Pada monitor, skema jenis RGB adalah sbb:

4. Penggunaan Warna:

Ø  Tampilkan warna dengan latar belakang (background) cerah.

Ø  Pilih warna yang cerah untuk foreground (coklat,putih dll)

Ø  Hindari penggunaan warna coklat dan hijau untuk background

Ø  Kecerahan dan kombinasi warna pada foreground dan background kontras

Ø  Gunakan warna yang sesuai,reka bentuk dibuat dalam b/w dan ditambahkan warna lain yang sesuai.

Ø  Gunakan warna untuk menarik perhatian user, komunikasi terarah, identifikasi status, menjalin hubungan antara elemen

Ø  Hindari penggunaan warna pada pekerjaan yang sifatnya non-task, untuk layar yang kebanyakan terdiri dari teks, warna dapat membantu ketika user harus mencari /membezakan bahagian-bahagian tertentu

Ø  Hal-hal yang perlu dipertimbangkan dalam penggunaan warna, iaitu:

- Buta warna (cacat warna)

- Monitor monochrome (hanya mengenal satu warna)

- Pengkod ekstra meningkatkan paparan interface

Ø  Konsisten dalam penggunaan warna

Ø  Membatasi pengkodan warna menjadi 8 warna (4 warna lebih baik)

Ø  Gunakan warna b/w atau "blur", atau b/w saja untuk mnunjukkan interface

Ø  Untuk menunjukkan keseragaman bagian-bagian pada laman.

Ø  Pereka sering menggunakan visual dengan menggunakan 4-5 warna.  

KESIMPULAN
          Secara keseluruhannya dalam rekabentuk laman web ini perlulah konsisten dengan tujuan penggunaan laman web tersebut diwujudkan, sama ada untuk tujuan pendidikan atau untuk makluman umum. Rekabentuk laman web yang dibuat perlulah sesuai dengan pengguna yang ditujukan sama ada untuk pelajar, masyarakat umum atau golongan-golongan tertentu. Penggunaan font dan warna juga perlu konsisten dengan motif yang dipilih dan laman tidak terlalu padat dengan imej atau text. Selain itu, laman web yang dibuat perlulah mempunyai pandu arah yang betul, supaya pengguna dapat tahu dimana mereka berada, dan tidak terperangkap di mana-mana laman yang dibuat. Dalam penghasilan laman web ini, para pelajar akan dapat mempraktikkan apayang dipelajari dalam kursus GKG Rekabentuk Laman Web dan seterusnya mencapai objektif yang dikehendaki.