SlideShare ist ein Scribd-Unternehmen logo
1 von 19
Perangkat Antar Muka Berbasis Web
:
1.Ilham Ilahi
2.Febri Andi
3.Rita Hendriani
PENDAHULUAN
Web desainer menghadapi tantangan yang signifikan.
Powell (2000) menunjukkan bahwa banyak situs web
menciptakan efek visual.
Sementara desain bergantung pada perangkat lunak
yang canggih. Selain itu, desain yang menarik belum
tentu efektif;
Untuk menjadi sukses, desain web harus dikelola
secara teknis
BAGIAN DARI PERANCANGAN WEB
• Isi: fitur yang akan megundang pengguna
mengunjungi situs.
• 1. Teknologi: cara untuk menerapkan fungsi
dari situs Web.
• 2. Visual: bentuk situs dan navigasi.
• 3. Tujuan: konsekuensi ekonomi untuk
implementasi situs
KONTEN
Konten adalah masalah yang sangat kompleks.
Sementara konten adalah inti dari pesan yang akan
dikomunikasikan, harus dirancang dengan hati-hati
untuk mengakomodasi keterbatasan pengguna
preferensi-preferensi yang menjadi lebih bervariasi dan
tidak diketahui serta di luar kemampuan pengguna.
USER INTERFACE
• Komponen pertama dari proses branding menyangkut latar
belakang pengguna.
• Pada dasarnya, hasil pemikiran yang kreatif dari antarmuka
pengguna harus mempunyai konsep yang jelas seperti :
1. Tentukan Pasar pengguna
2. Tentukan apa yang pengguna inginkan dari sebuah website
3. Menetapkan cara Web akan menyediakan sebuah metode
bagi pengguna untuk menggunakan produk dan jasa
perusahaan
4. Buat beberapa inovasi dan pesan untuk pengalaman
pengguna
MEREK / BRAND
• Brand merupakan komponen Penting dalam
melakukan design web
• Mengapa merek begitu penting untuk e-
commerce? Hal itu Jawabannya terletak pada
kemampuannya untuk mencapai berbagai
jenis pasar di Internet
STRATEGI PROFIL PENGGUNA
• Strategi profil pengguna adalah rencana untuk
mendaftarkan pengguna dan mengumpulkan
informasi dari mereka yang dapat membuat
pengalaman Web mereka lebih personal
(Smith, 2000).
PERSONALISASI WEB
• Tujuan dari personalisasi adalah untuk
memungkinkan pengguna agar merasa bahwa
mereka memiliki hubungan khusus dengan
bisnis. Personalisasi menambahkan ekuitas
merek karena pengguna merasa "dihargai.
LAYANAN PELANGGAN
Beberapa pilihan layanan pelanggan merek umum terkait
tercantum di bawah ini:
•Menawarkan jasa lebih untuk pembeli produk bermargin
tinggi.
•Memberikan dukungan on-line yang bagus bagi pelang-
gan .
•Memberikan eksklusif hot-line
•Penawaran diskon untuk volume pesanan pelanggan
•Buat area penjualan khusus di situs.
•Penawaran peluang, uang muka pembelian pada produk
baru yang ada
Sumber: e-Loyalty (Smith, 2000)
TEKS
• TATA LETAK TEKS
Tata letak mengacu pada penempatan dan penataan teks
pada halaman. Ini termasuk justifikasi teks (kiri, tengah, dll),
kolom, dan frame teks. Tata letak juga harus dilakukan
dengan format teks-misalnya, huruf tebal, jenis ukuran, jenis
warna, dll-untuk menyorot informasi penting
EFEK VISUAL
• Desain visual Sebuah situs Web adalah hal
pertama yang sering memberikan
pengalaman kepada pengguna (Powell, 2000).
• Efek Visual memberikan kenyamanan kepada
Pengguna untuk menggali lebih dalam lagi isi
dari sebuah Web
LATAR BELAKANG
• Penggunaan latar belakang adalah proposisi
yang rumit, terutama latar belakang yang
memuat tekstur.
• Secara umum, latar belakang yang terlalu
ramai tidak baik untuk halaman Web.
• Desainer Web akan terus ditantang dalam
menangani semua warna yang beragam,
gambar, dan latar belakang yang ada dalam
sistem e-commerce.
ARSITEKTUR WEB
• Aspek penting lain dari desain visual adalah
arsitektur dan navigasi dari sistem itu sendiri
• Navigasi dapat didefinisikan sebagai ilmu dan
seni mendapatkan orang atau benda dari satu
tempat ke tempat lain
ARSITEKTUR HALAMAN WEB
• Linear
Arsitektur linear banyak ditemui karena menyerupai cara kita
membaca buku, yaitu, mulai dan bergerak maju secara linear.
Dalam arsitektur situs linier, pengguna dapat berpindah dari
layar ke layar tanpa melompat-lompat di beberapa urutan
progresif. Arsitektur Web linier memungkinkan untuk bi-
directionality. (bergerak dua arah)
• Grid
Situs Grid menggunakan struktur linear ganda yang
menyediakan hubungan horisontal dan vertikal antara
halaman. Bila dirancang dengan baik, grid menyediakan
halaman yang saling berkaitan
• Hirarki
Hierarki adalah salah satu struktur arsitektur yang paling
umum. Memang, hirarki merupakan representasi visual dari
dekomposisi fungsional. Pada dasarnya, konsep hirarkis
konsisten dengan cara situs web yang paling umum
beroperasi.
Struktur hirarkis biasanya disebut pohon. Konsep pohon
adalah bahwa ketika Anda turun hirarki, jumlah anak-anak
atau node mengembang, sehingga menjadi lebih lebar
horizontal
KEUNTUNGAN PENGGUNAAN SISTEM
GUI
Di bawah ini adalah sejumlah contoh khusus tentang bagaimana
sistem GUI membantu pengguna, antara lain :
•Simbol diakui lebih cepat dari teks karena bentuk dan warna
mereka lebih mudah diklasifikasikan
•Simbol dapat dengan mudah dipelajari. Sebuah grafis,
representasi yang bergambar telah ditemukan untuk membantu
pembelajaran.
•Tindakan dan keterampilan visual berkembang sebelum bahasa
pada manusia. Manusia memiliki kempuan ingatan akan gambar
yang kuat
KELEMAHAN PENGGUNAAN ISTEM
GUI
• Kompleksitas desain. Lapis demi lapis pilihan
yang dikemas menjadi antarmuka
• Bila pengguna menghadapi antarmuka pada
aplikasi untuk pertama kalinya, urutan
langkah yang diperlukan tidak selalu tampak
intuitif.
• Representasi simbolik mungkin tidak begitu
akrab dengan kata-kata atau angka
TAHAPAN PEMBANGUNAN APLIKASI E-
COMMERCE BERBASIS WEB
– Tahap Satu dari proses ini adalah untuk mengidentifikasi jenis produk dan
jasa yang akan dipasarkan pada sistem e-commerce
• Tahap Dua melibatkan interaksi prepurchase dengan konsumen. proses ini
melibatkan perbandingan belanja dan / atau pemilihan produk berdasar-
kan kompetitif variabel dan atribut.
• Tahap Tiga adalah harga, leasing, pengisian antarmuka, di mana
konsumen memiliki kemampuan untuk memahami dan menentukan
rencana pembayaran dan proses pengadaan barang dan / atau jasa
• Tahap Empat adalah konfirmasi dan Penetapan
• Tahap Lima melibatkan konsumen dalam mengeluarkan beberapa bentuk
penerimaan atau konfirmasi pesanan.
• Tahap Enam melibatkan setelah proses interaksi, di mana pelanggan
dilayani dan didukung berdasarkan berbagai rencana yang ditawarkan
oleh organisasi
Terima Kasih

Weitere ähnliche Inhalte

Ähnlich wie OPTIMASI UI WEB

Pertemuan1 Konsep Web Desain
Pertemuan1   Konsep Web DesainPertemuan1   Konsep Web Desain
Pertemuan1 Konsep Web DesainWahyu Widodo
 
Bab 1 pengantar desain web
Bab 1   pengantar desain webBab 1   pengantar desain web
Bab 1 pengantar desain webYUSRA FERNANDO
 
Technical Aspects of Website and Information System Development _Training "IN...
Technical Aspects of Website and Information System Development _Training "IN...Technical Aspects of Website and Information System Development _Training "IN...
Technical Aspects of Website and Information System Development _Training "IN...Kanaidi ken
 
KONSEP PEMEROGRAMAN WEBSITE AAGUS NUGRAHA
KONSEP PEMEROGRAMAN WEBSITE AAGUS NUGRAHAKONSEP PEMEROGRAMAN WEBSITE AAGUS NUGRAHA
KONSEP PEMEROGRAMAN WEBSITE AAGUS NUGRAHAAgusNugraha39
 
Slide Presentasi Website PKM (1).pptx
Slide Presentasi Website PKM (1).pptxSlide Presentasi Website PKM (1).pptx
Slide Presentasi Website PKM (1).pptxNenniAruan
 
Pemahaman tentang INFOGRAFIS _Training "Effective INFOGRAFIS".
Pemahaman tentang INFOGRAFIS _Training "Effective INFOGRAFIS".Pemahaman tentang INFOGRAFIS _Training "Effective INFOGRAFIS".
Pemahaman tentang INFOGRAFIS _Training "Effective INFOGRAFIS".Kanaidi ken
 
Web Design Interface.pptx
Web Design Interface.pptxWeb Design Interface.pptx
Web Design Interface.pptxDani385969
 
materi 1 WEB.pptx
materi 1 WEB.pptxmateri 1 WEB.pptx
materi 1 WEB.pptxmargotour
 
Pelatihan Web Designer
Pelatihan Web DesignerPelatihan Web Designer
Pelatihan Web Designerfirdo1016
 
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptxDeniHidayat46
 
Web Design Trends 2015 (Kementerian Keuangan R.I)
Web Design Trends 2015 (Kementerian Keuangan R.I)Web Design Trends 2015 (Kementerian Keuangan R.I)
Web Design Trends 2015 (Kementerian Keuangan R.I)StringLabs Creative Studio
 
RPS - Pemrograman Web Desain - berbasis KKNI OBE Prodi MI.pdf
RPS - Pemrograman Web Desain - berbasis KKNI OBE Prodi MI.pdfRPS - Pemrograman Web Desain - berbasis KKNI OBE Prodi MI.pdf
RPS - Pemrograman Web Desain - berbasis KKNI OBE Prodi MI.pdfSuparno20
 
E-Site DESIGN
E-Site DESIGNE-Site DESIGN
E-Site DESIGNjojonael
 
Faktor faktor pembentukan halaman web yang nyaman dan ergonomic revisi
Faktor faktor pembentukan halaman web yang nyaman dan ergonomic revisiFaktor faktor pembentukan halaman web yang nyaman dan ergonomic revisi
Faktor faktor pembentukan halaman web yang nyaman dan ergonomic revisisaidfahry
 

Ähnlich wie OPTIMASI UI WEB (20)

Pertemuan1 Konsep Web Desain
Pertemuan1   Konsep Web DesainPertemuan1   Konsep Web Desain
Pertemuan1 Konsep Web Desain
 
Konsep Dasar Desain Web
Konsep Dasar Desain WebKonsep Dasar Desain Web
Konsep Dasar Desain Web
 
Bab 1 pengantar desain web
Bab 1   pengantar desain webBab 1   pengantar desain web
Bab 1 pengantar desain web
 
Styled Design (2).pptx
Styled Design (2).pptxStyled Design (2).pptx
Styled Design (2).pptx
 
Technical Aspects of Website and Information System Development _Training "IN...
Technical Aspects of Website and Information System Development _Training "IN...Technical Aspects of Website and Information System Development _Training "IN...
Technical Aspects of Website and Information System Development _Training "IN...
 
Web desain
Web desainWeb desain
Web desain
 
KONSEP PEMEROGRAMAN WEBSITE AAGUS NUGRAHA
KONSEP PEMEROGRAMAN WEBSITE AAGUS NUGRAHAKONSEP PEMEROGRAMAN WEBSITE AAGUS NUGRAHA
KONSEP PEMEROGRAMAN WEBSITE AAGUS NUGRAHA
 
Desain web
Desain webDesain web
Desain web
 
Slide Presentasi Website PKM (1).pptx
Slide Presentasi Website PKM (1).pptxSlide Presentasi Website PKM (1).pptx
Slide Presentasi Website PKM (1).pptx
 
Pemahaman tentang INFOGRAFIS _Training "Effective INFOGRAFIS".
Pemahaman tentang INFOGRAFIS _Training "Effective INFOGRAFIS".Pemahaman tentang INFOGRAFIS _Training "Effective INFOGRAFIS".
Pemahaman tentang INFOGRAFIS _Training "Effective INFOGRAFIS".
 
Web Design Interface.pptx
Web Design Interface.pptxWeb Design Interface.pptx
Web Design Interface.pptx
 
materi 1 WEB.pptx
materi 1 WEB.pptxmateri 1 WEB.pptx
materi 1 WEB.pptx
 
Pelatihan Web Designer
Pelatihan Web DesignerPelatihan Web Designer
Pelatihan Web Designer
 
7konsepdasarwebdesign
7konsepdasarwebdesign7konsepdasarwebdesign
7konsepdasarwebdesign
 
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
1_Pengantar_Web_Desain_aaaaaaaaapptx.pptx
 
Web Design Trends 2015 (Kementerian Keuangan R.I)
Web Design Trends 2015 (Kementerian Keuangan R.I)Web Design Trends 2015 (Kementerian Keuangan R.I)
Web Design Trends 2015 (Kementerian Keuangan R.I)
 
RPS - Pemrograman Web Desain - berbasis KKNI OBE Prodi MI.pdf
RPS - Pemrograman Web Desain - berbasis KKNI OBE Prodi MI.pdfRPS - Pemrograman Web Desain - berbasis KKNI OBE Prodi MI.pdf
RPS - Pemrograman Web Desain - berbasis KKNI OBE Prodi MI.pdf
 
E-Site DESIGN
E-Site DESIGNE-Site DESIGN
E-Site DESIGN
 
Faktor faktor pembentukan halaman web yang nyaman dan ergonomic revisi
Faktor faktor pembentukan halaman web yang nyaman dan ergonomic revisiFaktor faktor pembentukan halaman web yang nyaman dan ergonomic revisi
Faktor faktor pembentukan halaman web yang nyaman dan ergonomic revisi
 
UI UX
UI UXUI UX
UI UX
 

OPTIMASI UI WEB

  • 1. Perangkat Antar Muka Berbasis Web : 1.Ilham Ilahi 2.Febri Andi 3.Rita Hendriani
  • 2. PENDAHULUAN Web desainer menghadapi tantangan yang signifikan. Powell (2000) menunjukkan bahwa banyak situs web menciptakan efek visual. Sementara desain bergantung pada perangkat lunak yang canggih. Selain itu, desain yang menarik belum tentu efektif; Untuk menjadi sukses, desain web harus dikelola secara teknis
  • 3. BAGIAN DARI PERANCANGAN WEB • Isi: fitur yang akan megundang pengguna mengunjungi situs. • 1. Teknologi: cara untuk menerapkan fungsi dari situs Web. • 2. Visual: bentuk situs dan navigasi. • 3. Tujuan: konsekuensi ekonomi untuk implementasi situs
  • 4. KONTEN Konten adalah masalah yang sangat kompleks. Sementara konten adalah inti dari pesan yang akan dikomunikasikan, harus dirancang dengan hati-hati untuk mengakomodasi keterbatasan pengguna preferensi-preferensi yang menjadi lebih bervariasi dan tidak diketahui serta di luar kemampuan pengguna.
  • 5. USER INTERFACE • Komponen pertama dari proses branding menyangkut latar belakang pengguna. • Pada dasarnya, hasil pemikiran yang kreatif dari antarmuka pengguna harus mempunyai konsep yang jelas seperti : 1. Tentukan Pasar pengguna 2. Tentukan apa yang pengguna inginkan dari sebuah website 3. Menetapkan cara Web akan menyediakan sebuah metode bagi pengguna untuk menggunakan produk dan jasa perusahaan 4. Buat beberapa inovasi dan pesan untuk pengalaman pengguna
  • 6. MEREK / BRAND • Brand merupakan komponen Penting dalam melakukan design web • Mengapa merek begitu penting untuk e- commerce? Hal itu Jawabannya terletak pada kemampuannya untuk mencapai berbagai jenis pasar di Internet
  • 7. STRATEGI PROFIL PENGGUNA • Strategi profil pengguna adalah rencana untuk mendaftarkan pengguna dan mengumpulkan informasi dari mereka yang dapat membuat pengalaman Web mereka lebih personal (Smith, 2000).
  • 8. PERSONALISASI WEB • Tujuan dari personalisasi adalah untuk memungkinkan pengguna agar merasa bahwa mereka memiliki hubungan khusus dengan bisnis. Personalisasi menambahkan ekuitas merek karena pengguna merasa "dihargai.
  • 9. LAYANAN PELANGGAN Beberapa pilihan layanan pelanggan merek umum terkait tercantum di bawah ini: •Menawarkan jasa lebih untuk pembeli produk bermargin tinggi. •Memberikan dukungan on-line yang bagus bagi pelang- gan . •Memberikan eksklusif hot-line •Penawaran diskon untuk volume pesanan pelanggan •Buat area penjualan khusus di situs. •Penawaran peluang, uang muka pembelian pada produk baru yang ada Sumber: e-Loyalty (Smith, 2000)
  • 10. TEKS • TATA LETAK TEKS Tata letak mengacu pada penempatan dan penataan teks pada halaman. Ini termasuk justifikasi teks (kiri, tengah, dll), kolom, dan frame teks. Tata letak juga harus dilakukan dengan format teks-misalnya, huruf tebal, jenis ukuran, jenis warna, dll-untuk menyorot informasi penting
  • 11. EFEK VISUAL • Desain visual Sebuah situs Web adalah hal pertama yang sering memberikan pengalaman kepada pengguna (Powell, 2000). • Efek Visual memberikan kenyamanan kepada Pengguna untuk menggali lebih dalam lagi isi dari sebuah Web
  • 12. LATAR BELAKANG • Penggunaan latar belakang adalah proposisi yang rumit, terutama latar belakang yang memuat tekstur. • Secara umum, latar belakang yang terlalu ramai tidak baik untuk halaman Web. • Desainer Web akan terus ditantang dalam menangani semua warna yang beragam, gambar, dan latar belakang yang ada dalam sistem e-commerce.
  • 13. ARSITEKTUR WEB • Aspek penting lain dari desain visual adalah arsitektur dan navigasi dari sistem itu sendiri • Navigasi dapat didefinisikan sebagai ilmu dan seni mendapatkan orang atau benda dari satu tempat ke tempat lain
  • 14. ARSITEKTUR HALAMAN WEB • Linear Arsitektur linear banyak ditemui karena menyerupai cara kita membaca buku, yaitu, mulai dan bergerak maju secara linear. Dalam arsitektur situs linier, pengguna dapat berpindah dari layar ke layar tanpa melompat-lompat di beberapa urutan progresif. Arsitektur Web linier memungkinkan untuk bi- directionality. (bergerak dua arah) • Grid Situs Grid menggunakan struktur linear ganda yang menyediakan hubungan horisontal dan vertikal antara halaman. Bila dirancang dengan baik, grid menyediakan halaman yang saling berkaitan
  • 15. • Hirarki Hierarki adalah salah satu struktur arsitektur yang paling umum. Memang, hirarki merupakan representasi visual dari dekomposisi fungsional. Pada dasarnya, konsep hirarkis konsisten dengan cara situs web yang paling umum beroperasi. Struktur hirarkis biasanya disebut pohon. Konsep pohon adalah bahwa ketika Anda turun hirarki, jumlah anak-anak atau node mengembang, sehingga menjadi lebih lebar horizontal
  • 16. KEUNTUNGAN PENGGUNAAN SISTEM GUI Di bawah ini adalah sejumlah contoh khusus tentang bagaimana sistem GUI membantu pengguna, antara lain : •Simbol diakui lebih cepat dari teks karena bentuk dan warna mereka lebih mudah diklasifikasikan •Simbol dapat dengan mudah dipelajari. Sebuah grafis, representasi yang bergambar telah ditemukan untuk membantu pembelajaran. •Tindakan dan keterampilan visual berkembang sebelum bahasa pada manusia. Manusia memiliki kempuan ingatan akan gambar yang kuat
  • 17. KELEMAHAN PENGGUNAAN ISTEM GUI • Kompleksitas desain. Lapis demi lapis pilihan yang dikemas menjadi antarmuka • Bila pengguna menghadapi antarmuka pada aplikasi untuk pertama kalinya, urutan langkah yang diperlukan tidak selalu tampak intuitif. • Representasi simbolik mungkin tidak begitu akrab dengan kata-kata atau angka
  • 18. TAHAPAN PEMBANGUNAN APLIKASI E- COMMERCE BERBASIS WEB – Tahap Satu dari proses ini adalah untuk mengidentifikasi jenis produk dan jasa yang akan dipasarkan pada sistem e-commerce • Tahap Dua melibatkan interaksi prepurchase dengan konsumen. proses ini melibatkan perbandingan belanja dan / atau pemilihan produk berdasar- kan kompetitif variabel dan atribut. • Tahap Tiga adalah harga, leasing, pengisian antarmuka, di mana konsumen memiliki kemampuan untuk memahami dan menentukan rencana pembayaran dan proses pengadaan barang dan / atau jasa • Tahap Empat adalah konfirmasi dan Penetapan • Tahap Lima melibatkan konsumen dalam mengeluarkan beberapa bentuk penerimaan atau konfirmasi pesanan. • Tahap Enam melibatkan setelah proses interaksi, di mana pelanggan dilayani dan didukung berdasarkan berbagai rencana yang ditawarkan oleh organisasi