Interak

si &
Antarmu
ka
Penggun
a
Pertemuan 1
Perancangan
User
Experience

Pertemuan 1
 Apa perbedaannya?

Ix
UX UI
D
UX Designerconcerned with how the product feels
“Define interaction models, user task Deliverables
flows, Wireframes of
screens, storyboards,
and UI specifications. Communicate scenarios,
sitemap
end-to-end experiences, interaction models,
and screen designs to stakeholders. Work
Toolswith
Photoshop, Sketch,
our creative director and visual designers to Fireworks,
Illustrator,
InVisioninto
incorporate the visual identity of Twitter
features. Develop and maintain design Heard in the wild "We
wireframes, mockups, and specifications as show users the
should
needed.“ 'Thank You'
page once they have
finished signing up."
- Experience Designer job description at Twitter
UI Designerconcerned with how the product is laid out
"Concept and implement the visual
language
of Airbnb.com. Create and advance
site-wide style guides.“
- UI Designer job description at
Airbnb
Deliverables Comps,
storyboards, sitemap
Tools Photoshop, Sketch,
Illustrator, Fireworks
Heard in the wild "The
login and sign up links
should be moved
to the top right corner."
Visual Designer
concerned with pixels, icons, visual elements, ty

Deliverables
"Produce high-quality visual Comps, icons
designs--from
concept to execution, including Tools
Photoshop, Sketch,
those for Illustrator
desktop, web, and mobile devices at
a variety Heard in the wild
"The kerning is off and
of resolutions (icons, graphics,
the button should be 1
and marketing pixel to the left!"
materials). Create and iterate on
assets that
reflect a brand, enforce a
language, and inject
beauty and life into a product."
Interaction Designer
concerned with animation and
what
the interface does after a user
"Proficiency in graphic design,
touches it
Deliverables
motion Wireframes of interaction
graphics, digital art, a flows, storyboards
sensitivity to typography
Tools
and color, a general awareness of AfterEffects, Core
materials/textures, and a practical Composer, Flash, Origami
grasp of
Heard in the wild
animation. Knowledge of iOS, OS X,
"The menu should ease-in
Photoshop and Illustrator as well from the left in 800ms."
as familiarity
with Director (or equivalent),
Quartz
Composer (or equivalent), 3D
computer
modeling, motion graphics are
required."
UX Researcherconcerned with user’s needs
"Work closely with product teams to identify
Deliverables User
personas, A/B test
research topics. Design studies that address
results, Investigative
both user behavior and attitudes. Conduct
user
research using a wide variety of qualitative
studies & interviews
methods and a subset of quantitative methods,
such as surveys.“ Tools Mic, Paper, Docs

Heard in the wild "From

- UX Researcher job description at Facebook
our research, a typical
user..."
UI Developer concerned with creating a functional implementatio
of a product's interface

Deliverables Working
“You’ll architect and implement interactive experience
consumer-
facing features and frameworks using Tools CSS, HTML,
advanced Javascript, AJAX, HTML and CSS. .“
JavaScript

- UI Developer job description at BoxHeard in the wild "I'm

using a 960px 12-column
grid system."
UX ROLES ARCHITECTURAL
 UX UI

• Field • Interviewing • Content • Design • HTML • HTML

studies • Wireframe Inventory Principles • CSS • .Net
• Personas • Prototypes • Card Sorting • Usability • JQuery • Java
• Observatio • Work Flow • Labeling • Typography • JavaScript • SQL/Database
n (usability) • Navigation • HTML/CSS • Flash/Flex • Server
• Focus • Excel • Thesauri • Photoshop • ActionScript
groups • Silverback, • Search • Illustrator
• Usability Captcha • Controlled • Fireworks
testing • Omnigraffle, Vocabulary • JQuery
• Morae Visio • Excel
• Ovo • InDesign, • Optimal Sort
Studios Axure
• Excel • Fireworks,
• Word HTML
• SPSS
COURSE OVERVIEW
Desain Interaksi dan Antarmuka
Pengguna (SI)
Perancangan User
Experience (TIF)
ARAH PERKULIAHAN
Menyelesaikan
permasalahan/tantangan
interaksi manusia-sistem dengan
menerapkan proses perancangan UX
METODE PERKULIAHAN
• Dosen sebagai fasilitator.
• Dosen menjelaskan tahapan-tahapan
dan rasional tiap-tiap aktivitas
dalam proses.
• Mahasiswa bertugas menjalankan
aktivitas perancangan UX dengan
runtun dan tepat.
• Dosen memberikan feedback terhadap
proses (tugas) yg telah dikerjakan
mahasiswa.
DASAR TEORI
Pendekatan dalam perancangan UX
• Human Centered Design (IDEO, ISO)
• Agile Design Process
• Design Thinking (d.School)
• Design Sprint (Google)
MATERI & RPKPS
https://docs.google.com/document/d/
1eeaYxHdXAvMobdQC0AVTWPU1jv4YEm0ZBp
cSbd7dWuM/edit?usp=sharing
PENILAIAN
Tugas + Presentasi 40%
UTS 25%
UAS + Proyek Akhir 35%
 TUGAS-0

Berdasarkan pengalamanmu,

Bagaimanakah UX yg baik?
Apa saja yg diperlukan
untuk membangun UX yg positif ?