Element Of User Exerppience (Part 1)

 Ada berapa sih Elemen dari User Experience, sudah tahu belum?. Kalu belum tahu yuk kita simak bareng.

Didalam Proses User Experince atau (UXD) mengikuti pola 5 S , apa itu pola 5 S?  yaitu :

1. Strategy
2. Scoope
3. Structure
4. Skeletone
5. Suface

Hal ini dikemukakan oleh : Jasse  Jamess Garret, sebagai pakar atau Ahli dari The Elemen Of user exprerience"

1. STRATEGY

Strategy adalah : dimana semua dimulai : apa yang ingin kita dapatkan dari Website ini? lalu, apa yang diinginkan oleh User?

2. SCOPE Adalah mengubah strategy menjadi kebutuhan : Fitur apa yang harus ada di Website?

3. STRUCTURE  Adalah memberi bentuk pada runang lingkup (scope) : Bagaimana potongan potongan website akan berprilaku dan sesuai satu sama yang lain?

4. SKELETON Adalah membuat struktur berwujud: Komponen apa yang akan memungkinkan orang untuk menggunakan website ini?

5. SURFACE Adalah menyatukan semua secara visual : tampak seperti apakah produk akhirnya?

Read More

APA BEDANYA WIREFRIME, MOCKUP, DAN PROTOTYPE?

 Apa sih yang temen-temen tahu tentang wireframe? lalu apa itu Mock up? dan Apa itu prototype. Oke temen-temen yuk kenali apa sih bedanya ketiga istilah itu. Tentunya teman-teman kalau lagi belajar UI/UX design, istilah-istilah ini harus tahu dong. Lalu apa sih bedanya dari ketiganya itu. yuk kita simak yaa..

WIREFRAME

Wire itu adalah sketsa kasar tentang tampilan situs web atau tampilan aplikasi. Biasanya ilustrasi tampilanya berwarna garis abu-abu, kotak, warna dan place holder. Boleh dibilang Mirip dengan sketsa artsitektur sebuah bangunan, sketsa sebuah bangunan yang melibatkan banya pekerjaan dari banyak peserta untuk diubah menjadi proyek yang cocok untuk digunakan pada tahap branstroming,atau desain awal.

WireFrame

lalu apa sih bedanya dengan Mocp up?

MOCK UP

Mock up adalah sebuah gambar rangka Statis dengan lebih banyak UI dan  detail visual.Jika wireframe dianggap sebagai sketsa arsitektur sebuah bangunan, mockup mirip dengan model bangunan yang lebih terlihat nyata.

Dan ini akan memberikan klien sebuah kesan yang realists, tentang bagaimana situs web taupun aplikasi akhir yang terlihat. Hal ini bagus untuk berkomunikasi, diskusi dab berkolaborasi. Jadi simplenya mock up itu gambar model yang lebih realistis seperti aslinya.

MockUp

Okey sekarang yang terakhir apa itu prototype?

PROTOTYPE

Prototype adalah mockup yang sepenuhnya interaktif dengan fungsional UI dengan dasr ketelitian yang tinggi, interaksi dan animasi yang kaya. ini adalah proses akhir dari sebuah produk web ataupun aplikasi, jadi prototype sangat idela untuk menguji potensi maslah web dan aplikasi sebelum lanjut ke pengembangan atau development. Jadi simplenya adalah presentasi dengan detail dn ketelitian yang tinggi.

Jadi sampai disini paham yaa perbedaan ketiganya tentang, Wireframe, Mockup dan prototype.

Read More

Apa USER EXPEREINCE DESIGN?

  Sebelum kita masuk ke pembahasan Tentan UX DESIGN, yuuk kita baca satu Quotes dari Steve Jobs " Design is NOT Just What is Looks Like And Feels like.Design Is HOW IS WORK".

Yuuk Kita mulai dari pembahasan tetang User Experince atau UX, sebagai analogi kita lihat ilustrasi gambar diatas, orang tua tersebut melihat permainan lucu, ada 4 hewn yang berputar sambil mengeluarkan audio berupa musik.

 Nah dalam banyangan mereka, sia Anak pastilah senang, karena membayangkan yang di lihat, akan seperti yang mereka lihat. akan tetapi bagi si Anak terebut, yang dipandang hanyalah bagian bawah dari hewan hewan tersebut, tidak sama dengan yang dilihat oleh orang tua tersebut.

 Apa yang dilihat orang tuanya adalah tampilan antarmuka dari sisi mereka, tapi bukan dari sisi anak. Akibatnya adalah pengalaman yang didapatkan atau yang dirasakan oleh orang tua berbedan yang dirasakan oleh anak. Yang menjadi pengguna produk padakasus ini adalah anak.

dengan demikian berarti apa?

ini berarti yang diharapkan (pengalaman baik oleh pengguna produk) tidak tercapai.

Ilustrasi in sangatlah mirip dengan dengan kejadian yang mungkin pernah Kita alami. Kita membangun sebuah produk yang menurut Kita akan sangat baik dan dicintai User, memberi pengalaman yang yang baik pada User. Akan tetatpi Kita lupa (mencari tahu tetap tidak lengkap dan mendalam) untuk memastikan melihat dari sisi pengguna atau User.

Nah terus apa sih hubungannya ilustrasi tersebut dengan User Expereince atau UX?

Biar tidak bingung yuk dilanjut nyimaknya.

Kita tinjau dulu yuk teori ini:

DEFINISI UX (USER EXPEREINCE)

Jesse James Garrett mendefinisikan User Experience sebagai pengalaman yang diciptakan produk untuk orang-orang yang menggunakannya dalam dunia nyata. User Experience bukan tentang cara kerja suatu produk atau jasa. User Experience adalah tentang cara kerjanya di luar, di mana seseorang bersentuhan dengannya. Setiap hal (produk atau jasa) memiliki User Experience. Namun, tugas kita bukanlah menciptakan user experience, tetapi membuat sebuah User Experience yang baik. User Experience tidak bertujuan untuk membuat user menjadi happy, tetapi menjadikan kerjanya efektif.

Jadi Masih Kebanyakan orang yang memandang bahwa User Expereince hanyalah apa yang didapat dan dilihat saja. misalnya pada sebuah website. dan yang dapat dilihat adalah hanya  tampilan visual dan fungsi yang berjalan. Yuk kita melihat gambar yang ada  di bawah ini. Pengalaman yang dirasakan user adalah sebuah iceberg, puncak gunung es. Visual design hanyalah satu bagian dari gunung es User Experience. Terdapat Concept/ User Research, Requirement/ Content , Sitemap/ Screen Flow dan Wireframe yang justru menjadi dasar sebelum kita dapat membuat Visual Design.  Jadi UX tidak hanya berbicara tentang pengalaman yang dirasakan user, tetapi Juga MELAKUKAN proses User Experience Design.

The 5 Levels Of the Process Of User Experience Design

Yuk Kita lihat teori dibawah ini agar lebih paham.

Menurut usability.gov, User experience (UX) berfokus pada pemahaman secara mendalam terhadap user, apa yang mereka butuhkan, apa yang bernilai bagi mereka, kemampuan dan keterbatasan mereka. UX juga memperhitungkan tujuan dan sasaran bisnis dari kelompok yang mengelola proyek. Best practice dari UX dapat mempromosikan peningkatan kualitas interaksi dan persepsi user dengan produk Anda dan persepsi terhadap produk dan layanan terkait lainnya.

Rex Hartson & Pardha Pyla dalam bukunya yang berjudul The UX Book mengemukankan bahwa “User Experience adalah keseluruhan efek/dampak/akibat yang dirasakan oleh user sebagai hasil dari interaksi dengan dan konteks penggunaan sebuah sistem, perangkat atau produk, termasuk pengaruh usability, usefulness dan dampak emosional sepanjang interaksi dan rasa yang diingat memori setelah interaksi. “Interaksi dengan” bersifat luas dan mencakup melihat, menyentuh, dan berpikir tentang sistem atau produk, termasuk mengaguminya dan penyajiannya sebelum interaksi fisik apa pun.”

Donald Norman, pioneer dalam bidang User Experience mendefinisikan UX: “User Experience” mencakup semua aspek interaksi end-user dengan perusahaan, layanan, dan produknya.

Dilengkapi dengan penjelasan dari www.designlab.com, yang menyatakan bahwa “UX Design bukan tentang membuat sesuatu yang cantik, tetapi tentang menciptakan produk luar biasa yang diinginkan dan dibutuhkan orang. Cara terbaik untuk melakukannya adalah dengan memahami pengguna secara mendalam dan mengingatnya di setiap langkah proses desain.“

Jika dalam bahasa sederhana User Experience dapat disebut sebagai pengalaman yang dirasakan oleh user saat berinteraksi dengan sebuah produk dan rasa yang tinggal dalam memori setelah menggunakannya, maka apakah yang disebut dengan User Experience Design?

Read More

WIREFRAME ITU APA? YUK KENALI...

 

Ketemu lagi teman teman  digital semuanya, untuk kali ini saya mau nulis tentang Wireframe untuk website. sudah Tahu apa itu wireframe. Owh iya sebelum kita lebih lanjut bicara wireframe. semoga teman teman semua sehat yaa. Seiring dengan PPKM yang masih diperpanjang yuk tetap produktif walaupun dalam kondisi dirumah. Dan mau tidak mau sekarang sudah the real digital. Welcome era digital yang sesungguhnya. Oke yuk kita lanjut.

Apa itu wireframe?

Wireframe merupkan slah satu tahapan yang penting dalam proses perancangan produk dgital. Tak terkecuali dalam prose pembuatan website. Sebelum masuk masuk ke tahap pengembangan atau develoment, web developer biasanya terlebih dahulu meminta bantuan UI/UX designer untuk membuat sebuah wireframe.

Lalu apa sih wireframe itu penjelasannya? yukk disimak

Wireframe adalah sebuah kerangka yang berfungsi sebagai atau untuk tata letak sebuah  website sedemikian rupa agar sesuai dengan keinginan dari klien sebelum masuk ke tahpan desain dan coding.

Lalu bagaimana proses pembuatan wireframe?

Pembuatan wireframe biasanya dilakukan dilakukan oleh seorang UI Designer dengan memanfaatkan software desain khusus untuk wireframe ataupun bisa dilakukan coretan khusus manual.

Apa saja Komponennya?

Adapun Komponen yang menjadi bahan untuk proses wireframe meliputi, bagian header bodycontent, footer, sidebar serta komponen tambahan yang lain nya jika ada.

Dan secara umum perbedaan mendasarnya antara wireframe dan mockup ada pada tingkatan fidelity, dimana wireframe termasuk dalam low fidelity, sementara mockup ada pada tingkatan atau level high fidelity.

KOMPONEN  WIREFRAME WEBSITE

Didalam website mempunyai komponen yang wajib ditampilkan agar pengunjung bisa semakin mudah mendapatkan dan menemukan informasi yang dibutuhkan. Yuk kita simak koponen dalam proses pembuatan wireframe.

1. LAYOUT

Pertama yang harus diprsiapkan dalam membuat wireframe website adalah antarmuka atau interface atau layout utama. Elemen yang termasuk dalam layout melipute bagian header (kepala), menu navigasi, body, pemilihan jenis dan ukuran font hingga pemilihan letak sidebar (mau ditaruh sebelah kiri atau kanan)

2. NAVIGASI

Apa itunavigasi?

Navigasi itu kalau diibaratkan dengan tempat wisata adalah bagian peta dan petunjuk arah yang biasa digunakan para pengguna untuk menjelajahi isi konten yang ada. Jadi Navigasi ini benar -benar dikonsep secara matang mulai dari proses wireframe agar kedepan lebih nyaman dan mudah digunakan oleh penngunjung.

3. ELEMEN TAMBAHAN

selain dari mebuat layout Antarmuka serta navigasi, komponen selanjutnya yang perlu disiapkan  saat membuat wireframe wibsite adalah element pendukung. Element atau bgian ini biasanya jumlahnya berbeda tiap website.

Misalnya untuk website toko online setidaknya memerlukan Fitur Form konfermasi pesanan, fiur cek resi, serta layanan chat untuk diskusi antara penjal dan pembeli. Contoh wireframe

MANFAAT DAN KEUNTUNGAN WIRE FRAME APA SAJA

Apa sih Manfaat dan keuntungannya?

salah satunya mempermudah tugas web developer adanya wireframe dalam proses pembuatan web memberiri keuntungan dari sisi klien.

apa saja manfaatnya yuk disimak:

1.Menghemat waktu untuk edit dan revisi pada saat project pembuatan website sudah selesai.

2. Membangun Kepercayaan Konsumen karena apa yang akan didapatkan sudah tergambar jelas didepan

3.Memberikan gabaran website diawal.

Oke teman teman demikian sekilas dan singka tentanng wireframe. Jangan Lupa juga untk baca artikel tentang UI dan UX

Read More

SKILL YANG DIBUTUHKAN UNTUK UI/UX DESIGNER

 

Teman-teman tahu enggak? Bahwa untuk menjadi UI/UX itu membutuhkan sebuah kemampuan atau skill tersendiri. Lalu apa saja sih skill yang dibutuhkan sebagai seorang UI designer itu? Nah skil yang harus dimiiki diantaranya :

• Skill desain grafis
• Skill desain Branding
• Creative Thinking
• Covergert thingking

Nah itu beberapa skill yang harus dimiliki oleh UI Designer didalam mendesain tampilan produk agar lebih menrik dan mudah untuk interaksi.

Sementara untuk UX designer bertanggung jawab membuat design project. Dengan cara pendekatan pengguna agar nanti produkt digunakan.Oleh sebab itu, mereka harus memiliki skill melakukan riset, analytical thinking, problem solving, critical thinking, dan creative thinking. 

Nah untuk mempermudahlagi perbedaanya yuuk kita simak dalam bentuk tabel

Sumber Tabel : Niagahoster

oke teman-teman ini dulu yaa sharingnya, semoga bermanfaat yaa.

Read More

3 Tools UI DESIGN yang Bisa di AKses Gratis

 

Kalau bicara tentang UI design tools tentu banyak sekali ada sekitar 10 tools, tapi tentu saja semua itu gratis alias berbayar, namun teman -teman bisa akses 3 tools secara gratis. Tampilan Antarmuka atau interface website dan aplikasi mobile adalah merupankan elemen yang sangat penting yangharus diperhatikan oleh seorang developer . untuk mendapatkan visual yang bagus, tentu membutuhkan tool yang bisa mempermudah, sebetulnya ada banyak tools yang bisa digunakan . untuk kali ini ada tools yang bisa kamu akses secara gratis atau free. yuuk langsung disimak yaa..

1. Adobe XB : Pilihan tools wajib yang pertama harus dimiliki adalah Adobe XB, ini adalah aplikasi besutan dari adobe yang sudah terkenal dan tidak diragukan lagi. Adobe XB diluncurkan Tahun 2016, dan ini merupakan respon dari Adobe memenuhi permintaan dari para UI designer yang membutuhkan aplikasi untuk merancang User interface atau UI. Llu fitur fturnya apa saja ?Fitur dari Adobe XD: 1. Repead Grit Repeat grid: Berfungsi untuk membuat grid untuk item yang berulang seperti lists dan galeri foto. 
• Prototype and animation: Membuat prototipe animasi lewat linking artboards. 
• Interoperability: Dengan fitur ini, Kita dapat mengakses files dari aplikasi Adobe lainnya, seperti Illustrator, Photoshop, dan AfterEffects.
• Voice design:  Berguna untuk membuat aplikasi agar dapat beroperasi dengan perintah suara.
• Symbols: Pengguna bisa membuat simbol untuk menggambarkan logo dan buttons. 
• Responsive resize: Menyesuaikan ukuran gambar dan objek lainnya pada artboards secara otomatis. 

2. InVisionApp Aplikasi yang Kedua adalah platform yang bisa kita  manfaatkan untuk mendukung proses desain dan prototyping melalui kolaborasi dengan sesama desainer sampai ke tahapan presentasi ke klien. 

   Kita dapat membuat rancangan mockup interaktif untuk wireframes dan desain dalam satu program. Jadi sekarang Kita bisa langsung melakukan uji coba UI design website dan aplikasi ponsel hasil rancangannya  tanpa perlu repot-repot menggunakan tools tambahan lainnya. Lalu apa saja fitur yang da dalam INVision app, berikut fitur-fiturnya

   Fitur-Fitur: 

   • Prototipe desain 
   • Design sharing and presentation
   • User testing and research
   • Real-time design meetings and whiteboard
   • Project management for designer
   • Design feedback and commenting
3. MAZE  Dalam proses pembuatan desain user interface yang oke, Kita  mesti melalui tahapan uji coba untuk memastikan rancangan yang kita buat dapat berjalan dan berfungsi sesuai dengan baik.Aplikasi ini hadir sebagai salah opsi platform yang dapat Kita gunakan untuk tujuan tersebut.

   Maze adalah merupakan sebuah user testing platform yang bisa digunakan untuk menguji prototipe aplikasi dalam bentuk tampilan autentik dari sudut pandang pengalaman pengguna (user experience). Jadi simpulanya  hasil rancangan UI design yangkita buat bisa langsung dites lewat platform ini.

   Kita dapat membuat sendiri susunan tes yang cocok untuk berbagai prototipe aplikasi lewat platform Maze yang berbasis web. Maze dapat mencatat user path dari perangkat desktop maupun mobile tanpa bantuan aplikasi pihak ketiga.  lalu fitur fiturnya apa saja : 

   Fitur-Fitur:

   • Direct success
   • Indirect success
   • Bounce rate
   • Average duration 
   • Mis-click rate
   • Heat Map & Click Trail
• Individual User Session Data 

Oke teman teman semoga bermanfaat yaa, jangan lupa baca artikel lainya tentang website.

Read More

MENGENAL UI dan UX

Istilah UI ( User Interface) dan UX (User Experience) dalam pengembangan website memang sangat penting, keduanya sangat berkaitan. Lalu mana yang lebih penting antara UI dan UX, apakah hanya cukup UI atau UX.

Jadi kalau teman teman belajar website harus tahu istilah UI dan UX. Lalu apakah itu User interface dan apa itu User experence?

USER EXPERIENCE (UX)

User Expeirence (UX) adalah proses mendesain produk melalui pendekatan pada pengguna. Nah dengan pendekatan ini tentu Kita bisa menciptakan produk yang sesuai dengan kebutuhan dan keinginan pengguna.

Produk dengan desain UX yang baik adalah akan menciptakan yang menyenangkan bagi pengguna sesaat menggunakan produk Kita. Sehingga pengguna menjadi mudah dan Nyaman saat menggunakan produk.

Komponen UX itu apa saja sih? Adapun komponen UX meliputi bagaimana fitur yang disediakan pada pada produk, struktur desain, navigasi pengguna produk, aspek visual design, dan seluruh aspek aspek interaksi dengan pengguna. Dan yang jelas UX juga meliputi bagaimana kita menentukan branding, konten, dan copywriting yang sesuai dengan target pengguna.

USER INTERFACE (UI)

Nah kemudian apa sih User Interface itu? Kalau UI adalah bagian dari UX yang berupa tampilan visual dengan sebuah sistem. Dengan Tampilan tersebut memungkinkan pengguna terhubung dan berinteraksi dengan suatu produk.

Lalu apa saja sih Komponen dari UI ? Komponen UI antara lain tombol atau button, ikon typografi, tema, layout, animasi yang tampil pada produk dan visual interaktif yang lainnya.

Nah itu teman teman tentan Istilah UI (User Interface)  dan UX (User Expereince)

Next nanti akan kita bahas lagi tentang UI dan UX, semoga bermanfaat.

Read More

UML

Unified Modeling Language (UML) , merupakan sistem arsitektur yang bekerja dalam OOAD (Object Oriented Analysis and Design) dengan satu bahasa yang konsisten untuk menentukan, visualisasi, mengkonstruksi, dan mendokumentasikan artifact yang terdapat dalam sebuah software. UML merupakan bahasa pemodelan yang paling sukses dari tiga metode OO (Object Oriented) yang telah ada sebelumnya, yaitu Booch, OMT, OOSE. UML merupakan kesatuan dari ketiga metode pemodelan tersebut dan ditambah kemampuan lebih karena mengandung metode tambahan untuk mengatasi masalah pemodelan yang tidak dapat ditangani ketiga metode tersebut.

Tujuan UML diantaranya adalah untuk;

·         Memberikan model yang siap pakai, bahasa pemodelan visual yang ekspresif untuk mengembangkan dan saling menukar model dengan mudah dan dimengerti umum.

·         Memberikan bahasa pemodelan yang bebas dari berbagai bahasa pemrograman dan proses rekayasa.

·         Menyatukan praktik-praktik terbaik (Best Practise) yang terdapat dalam pemodelan.

UML tidak mencakup :

·         Bahasa Pemrograman.

o    UML adalah bahasa pemodelan visual, bukan dimaksudkan untuk menjadi suatu bahasa pemrograman visual, tetapi UML memberikan arah untuk bergerak ke arah kode , dalam aplikasi Visual UML model tertentu dapat melakukan konversi dari model yang sudah dibuat menjadi skeleton code.

·         Tool (Software aplikasi) pemodelan.

o    Membuat standar sebuah bahasa diperlukan oleh tool-tool dan proses. UML mendefinisikan semantik dan notasi, bukan sebuah tool. Contoh tool yang menggunakan UML sebagai bahasanya adalah Rational Ros, Enterprise Architect, Visual Paradigm.

·         Proses Rekayasa.

o    UML digunakan sebagai bahasa dalam proyek denga proses yang berbeda-beda. UML bebas dari proses dan mendefinisikan sebuah proses standar bukan tujuan UML atau RFP dari OMG.

Artifact UML.

Untuk membuat suatu model, UML memiliki diagram grafis sebagai berikut;

·         use-case diagram.

·         class-diagram.

·         behavior diagram.

o    statechar diagram

o    activity diagram

o    interaction diagram.

§  sequence diagram.

§  collaboration diagram

·         implementation diagram.

o    component diagram.

o    deployment diagram.

Diagram-diagram tersebut diberi nama berdasarkan sudut pandang yang berbeda-beda terhadap sistem dalam proses analisis atau rekayasa.

 Sumber:http://staff.unila.ac.id/

Read More