Desain dalam IMK

Jurusan Teknik InformatikaFakultas Teknologi Industri

ATA 2020/2021

Kemampuan Akhir◎ Memahami Desain,

Desain Grafis danDesain Dialog

2

Bahan Kajian◎ Prinsip Desain◎ Filosofi Desain◎ Prinsip Desain Grafik◎ Prinsip Desain Dialog◎ Desain Icon – Dialog Style◎ User Interface

3

Prinsip Desain

1

4

Komponen Antarmuka

5

01Pengguna

02 04Command

Language

Tampilan

Informasi

03Umpan

Balik

👨

Jenis Desain

6

01Skeuomorphism

02 Flat Design

03Material

Design

Prinsip DesainDesain antarmuka yang baik UCD

7

Tools

Teknik

Metode

Prosedure

Proses

Peran PenggunaUCD

8

PERENCANAAN PERANCANGAN

IMPLEMENTASI PENGELOLAAN

SISTEM

Metode UCD

9

PendekatanPengembangan Sistem

10

Soft System

Methodology (SSM)

Perancangan

Star Life Cycle

Perencanaan sampai

Implementasi

Multiview

Awal Perancangan

Open System Task

Analysis (OSTA)B

D

C

APerencanaan

Konsep UCD

11

Berpusat pada user

Tujuan, sifat, konteks,

lingkungan

pengalaman user

Model pekerjaan pengguna

didukung sistem

👨

Prinsip UCD Lifecycle

12

Perancangan

Interatif

Perancangan

Terintegrasi

Pengujian

Pengguna

User

Requirement

B DC

A

“Siapa user dari UCD ??

13

User UCD

14

01 Pengguna

02Pengguna

Langsung

03

Pengguna

Tidak

Langsung

04 Stakeholder

05Usability

Engineers

06

Technical

Staff dan

Software

Developers

Aturan UCD

15

Pemenuhan

Perspective

Installasi

Instruksi

Control

Scope

Umpan Balik

Keterkaitan

Assistance

Usability

Sifat UCD Yang Diubah

16

1 Proses pengembangan, focus pada sistem

2 Audiens berubah dalam teknologi pasar

3 Perancangan sistem usable sulit, tidak

dapat diprediksi

4 Tim dan pendekatan khusus dalam

mengembangkan sistem

5Kebutuhan dalam perancangan

implementasi

Filosofi Desain

2

17

Ide MembuatDesain

18

1Memperbaiki atau membuat menjadi lebih

baik

2 Membuat ide baru

3 Membuat dengan kebutuhan pasar

Prinsip DesainAntarmuka

19

Sediakan umpan balik yang informatif

Menggunakan dialog sederhana dan alami

Konsisten untuk urutan, aksi, perintah,layout

dan daftar kata

Meminimalkan beban ingatan user, memberikan

deskripsi

Memberikan perubahan aksi yang mudah

Prinsip DesainAntarmuka

20

Mendukung focus internal dari kontrol

Menyediakan jalan keluar yang jelas

Menyediakan shortcut

Menyediakan penangan kesalahan dan

petunjuk kesalahan

Menyediakan help dan dokumentasi

TantanganMembuat Desain

21

1 Proses pembuatan

2 Metoda perancangan

3 Produk yang dihasilkan (rancangan)

4 Disiplin ilmu yang digunakan (desain)

Prinsip Desain Grafik

3

22

Sifat Desain Grafik

23

01 Look

02 Feel

Tampilan Visualisasi

Aksi Pengguna

Prinsip DesainGrafik

24

Konsisten

Metaphor

Kejelasan

Alignment

Pendekatan

Warna

Kontras

Tipografi

Icon

Prinsip Desain Dialog

4

25

Definisi DialogPercakapan antara dua kelompok

atau lebih

26

Desain UI Struktur daripercakapan antara user dan

sistem komputer

Tingkatan BahasaKomputer

27

01 Leksikal

02 Sintaksis

03 Semantik

Tingkatan BahasaKomputer

28

Leksikal

Ejaan kata

Icon pada layar

Semantik

Percakapan

Penyebutan kata/arti

kata

Sintaksis

Urutan dan Struktur I/O

Grammar kalimat

03

01 02

Dialog Manusia & Komputer

29

Dialog dilakukan bersamaan

Terstruktur dan terbatas

Berurutan

Dialog tergantung respon partisipan

Dialog terstruktur level sintaksis

Proses Perancangan Dialog

30

1 Rangkaian dialog struktur tugas goal

2 Rangkaian dialog user support

3 Rangkaian dialog urut sesuai struktur tugas

Prinsip Desain Dialog

Membagisistem menjadi

beberapabagian Module

31

Konsep NotasiDiagramatik

32

Keuntungan

Kekurangan

Desainer melihat secara sekilas struktur

dialog

Sulit menjelaskan struktur dialog yang

luas dan kompleks

Desain Icon – Dialog Style

5

33

Dialog StyleCara pengorganisasian berbagai

teknik dialog interaktif

34

Komunikasi antara manusiadengan komputer

Tujuan DesainInterface denganDialog

Mendapatkan kriteria pentingdalam pengoperasian program

aplikasi

35

Ramah dengan pengguna (User Friendly)

Sifat Dialog Style

36

Kompleksitas

Inisiatif

Keluwesan

Kekuatan

Beban Informasi

Observabilitas

Konsistensi

Umpan Balik

Konrolabilitas

Efisiensi

Keseimbangan

Dialog Berbasis PerintahTunggal (Command Line Dialog)

Perintah tunggal dioperasikandalam domain command

language

37

DOS dan UNIX

“Keuntungan dan Kekurangan

Dialog berbasis tunggal ??

38

Keuntungan

39

Kekurangan

Luwes

Cepat dan akurat

Efisien dan ringkas

Inisiatif pengguna

Beban ingatan

tinggi

Memerlukan

pelatihan lama

Membutuhkan

penggunaan teratur

Jelek menangani

kesalahan

Dialog BerbasisBahasa Pemrograman

Ragam dialog perintah dalamsuatu berkas Batch File

40

Assembler, Pascal, C, Fortran, BASIC

Dialog BerbasisBahasa Alami

Dialog dengan bahasa yang dimengerti manusia

41

Mencetak data mahasiswadengan IPK > 3.0

“Keuntungan dan Kekurangan

Dialog berbasis bahasa alami ??

42

Keuntungan

43

Kekurangan

Alamiah

Tidak memerlukan

sintaksis khusus

Luwer dan powerfull

Inisiatif campuran

Tidak jelas

Dualisme

Bertele-tele

Tidak efisien

Perancangan SW

rumit

Dialog BerbasisPengisian Borang

Penerapan aktifitas pengisianborang

44

1 Tampilan struktur masukkan dalam sistem

2 Kejelasan perancangan dan penyajian

visual

3 Kebenaran dan kehandalan masukkan

Dialog BerbasisIcon

Dialog style symbol dan tandaaktifitas tertentu

45

Tidak bergantung

pada bahasa

Gambar umum

Mudah diingat dan

dipelajari

Tidak efektif

Membingungkan

Boros tempat

Keu

ntu

ng

an

Ke

ku

ran

gan

Dialog ManipulasiLangsung

Dialog style menyajikanlangsung aktifitas sistem ke

pengguna dikerjakan sistemkomputer

46

Kontrol proses, simulator danperancangan bantuan komputer

(CAD)

Dialog BerbasisInteraksi Grafik

Dialog GUI dengan bentuk visual grafik, icon dan animasi

47

User Interface

6

48

Sekilas User Interface

Bentuk visual penggunaberinteraksi dengan produk dan

layanan

49

UI UXUI Fokus pada keindahan tampilan

UX Fokus pada interaksi kenyamanan pengguna

50

Reference

http://lintang.staff.gunadarma.ac.id/Downloa

ds/files/62828/buku-ajar-imk.pdf

http://lintang.staff.gunadarma.ac.id/Downloa

ds/files/60749/M6-

Notasi+Dialog+dan+Desain.PDF

Material

01

https://www.free-powerpoint-templates-

design.com/computer-repair-powerpoint-

templates

https://www.slidescarnival.com/puck-free-

presentation-template/371

https://www.free-powerpoint-templates-

design.com/abstract-leaves-powerpoint-

template/

Free Templates

02

Thanks!

Any questions?

51