{"id":9614,"date":"2021-02-20T08:22:22","date_gmt":"2021-02-20T08:22:22","guid":{"rendered":"https:\/\/hosteko.com\/blog\/?p=9614"},"modified":"2021-02-20T08:22:22","modified_gmt":"2021-02-20T08:22:22","slug":"apa-itu-ui-microinteractions-contoh-dalam-produk-digital","status":"publish","type":"post","link":"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital","title":{"rendered":"Apa Itu UI Microinteractions? Contoh dalam Produk Digital"},"content":{"rendered":"

Apa itu UI Microinteractions?<\/span><\/strong><\/h1>\n

UI microinteractions<\/strong> adalah respon visual atau audio yang dilihat pengguna saat melakukan tindakan atau interaksi pada produk. Kata mikro<\/strong> pada microinteractions diartikan sebagai perubahan kecil dan sangat kontekstual pada tampilan visual yang dilihat pengguna.<\/p>\n

\n

Satu hal yang membuat microinteractions begitu kuat adalah rasa senang yang muncul dari pengguna. Desainer harus memiliki tujuan untuk menyenangkan penggunanya dan membuat mereka merasa senang saat menggunakan produk.<\/p>\n<\/div>\n

\n

Dalam buku Designing for Emotion<\/strong> yang ditulis oleh Aaron Walter<\/strong>, kesenangan (pleasurable) pengguna berada di puncak piramida kebutuhan pengguna setelah produk tersebut memiliki fungsi (functional), dapat diandalkan (reliable) dan dapat digunakan (usable).<\/p>\n

Meningkatkan Pengalaman Pengguna (UX)<\/span><\/strong><\/h1>\n
\n

Piramida kebutuhan pengguna membuktikan bahwa pengalaman pengguna (user experience) yang baik lebih penting daripada produk yang hanya bisa digunakan begitu saja. Pengalaman pengguna yang menyenangkan membuat interaksi dengan produk juga menjadi menyenangkan.<\/p>\n<\/div>\n

\n

UI Microinteraction dapat mendorong keterlibatan pengguna pada produk, membantu pengguna melihat hasil visual dari tindakan yang mereka lakukan dan mencegah kesalahan dalam menggunakan produk.<\/p>\n<\/div>\n

\n

Yang tidak kalah penting, dapat mengkomunikasikan antara brand dan value yang dimiliki kepada pengguna sehingga mereka akan selalu mengingat dan menggunakan brand atau produk walaupun banyak kompetitor dengan produk serupa.<\/p>\n

Ciri Microinteraction yang Baik<\/strong><\/h1>\n

Ciri interaksi mikro yang baik di antaranya, yaitu :<\/p>\n

    \n
  • Simpel, banyaknya interaksi mikro yang kita temui sehari-hari akan memicu user merasa tidak nyaman apabila terlalu kompleks.<\/li>\n
  • Konsisten, tidak ada interaksi mikro yang lebih menonjol daripada yang lain.<\/li>\n
  • Memiliki tujuan yang spesifik untuk berinteraksi dengan user.<\/em><\/li>\n
  • Telah di tes pada user dan terasa meningkatkan experience-nya.<\/li>\n<\/ul>\n

    Komponen Microinteraction<\/strong><\/h1>\n

    Kata Dan Saffer<\/strong>, seorang product designer terdapat empat komponen dalam interaksi mikro, yaitu :<\/p>\n

    1.\u00a0Trigger<\/strong><\/h3>\n

    Trigger<\/strong> merupakan sesuatu yang memicu interaksi mikro. Unsur ini bisa dimulai baik dari user maupun dari sistem. Bentuk konkrit trigger user biasanya berupa tombol atau fungsi yang bisa di klik, tarik, scroll dan lain-lain.<\/p>\n

    Sementara itu,\u00a0trigger\u00a0sistem biasanya merupakan fungsi otomatis. Misalnya, saat notifikasi muncul dalam aplikasi.<\/p>\n

    2.\u00a0Rules<\/strong><\/h3>\n

    Komponen selanjutnya dalam micro interaction adalah rules. Secara singkat,\u00a0rules<\/strong>\u00a0merupakan apa yang harus dilakukan oleh aplikasi setelah\u00a0trigger\u00a0terjadi.<\/p>\n

    3.\u00a0Feedback<\/h3>\n

    Komponen ini merupakan cara aplikasi \u201cberbicara\u201d kepada user. <\/em>Feedback\u00a0bisa berupa animasi,\u00a0pop-up, perubahan warna, dan lain-lain.<\/p>\n

    Misalnya, apabila\u00a0user\u00a0salah memasukkan\u00a0password, kotak kata sandi akan berubah menjadi merah serta bergetar ke kiri dan kanan.<\/p>\n

    Ada dua faktor yang harus dipikirkan dalam membuat feedback, yaitu :<\/p>\n

      \n
    • apa yang harus diketahui pengguna.<\/li>\n
    • seberapa sering\u00a0feedback\u00a0harus terjadi.<\/li>\n<\/ul>\n

      4.\u00a0Loops\u00a0dan\u00a0modes<\/strong><\/h3>\n

      Kedua unsur ini memiliki maksud seberapa lama dan seberapa sering interaksi mikro harus terjadi. Apabila suatu kondisi berubah, bagaimana perubahan kondisi tersebut mengubah interaksi mikro juga?<\/p>\n

      Misalnya, pada aplikasi\u00a0e-commerce, tombol \u201cBeli Sekarang!\u201d berubah menjadi \u201cBeli Lagi!\u201d apabila\u00a0user\u00a0pernah membeli suatu barang.<\/p>\n

      UI Microinteractions pada Produk Digital<\/span><\/strong><\/h1>\n

      \"\"<\/p>\n<\/div>\n

      \n

      Saat mengkonfirmasi tindakan di suatu produk akan melihat visual saat mengklik tombol atau elemen interaktif lain sebagai konfirmasi dari interaksi atau tindakan. Sebagai pengguna tahu jika sistem sudah menerima dan mengerjakan perintah.<\/p>\n<\/div>\n

      \n

      UI microinteractions memudahkan pengguna untuk mengetahui apa yang sedang dilakukan sistem. Contohnya pada progress bar setelah klik konfirmasi dari tindakan. Progress bar memudahkan pengguna untuk memprediksi berapa lama waktu yang dibutuhkan sistem untuk beroperasi.<\/p>\n<\/div>\n

      \n

      UI microinteractions juga dapat membantu mengkomunikasikan masalah kepada pengguna dan memandu ke solusi permasalahan tersebut.<\/p>\n

      1. Like dan Dislike<\/span><\/strong><\/h3>\n
      \n

      Salah satu contohnya adalah fitur like pada Twitter. Pengguna dapat mengklik ikon hati sebagai tindakan pada suatu tweet yang disukai. Microinteractions menggunakan animasi hati untuk mengkomunikasikan bahwa menyukai sesuatu di produk tersebut.<\/p>\n<\/div>\n

      \n

      Bisa membatalkan tindakan dengan klik lagi ikon hati, warna hati akan kembali ke warna semula yang sebelumnya merah ketika disukai.<\/p>\n

      2. Transisi Navigasi<\/span><\/strong><\/h3>\n
      \n

      UI microinteractions dapat membantu desainer UI\/UX dalam meningkatkan pengalaman navigasi di aplikasi. Banyak aplikasi ponsel menggunakan ikon navigasi garis tiga (seperti hamburger) untuk melihat menu dengan pilihan navigasi.<\/p>\n<\/div>\n

      \n

      Bisa mengkomunikasikan perubahan status yang dijalankan sistem secara lebih jelas dengan menggunakan transisi dengan klik ikon garis tiga tersebut.<\/p>\n

      3. Pull to Refresh<\/span><\/strong><\/h3>\n

      Menarik layar handphone atau tablet untuk merefresh halaman aplikasi adalah salah satu contoh umum yang sering ditemui. Pengguna akan mendapatkan tampilan visual yang lebih baik setelah melakukan tindakan menarik layar.<\/p>\n

      4. Kesalahan saat Input Data<\/span><\/strong><\/h3>\n
      \n

      Ketika pengguna melakukan kesalahan dalam menggunakan aplikasi atau produk, biasanya mereka tidak akan peduli apa yang menyebabkan kesalahan baik itu kesalahan dari input yang mereka masukkan atau kesalahan sistem.<\/p>\n<\/div>\n

      \n

      Perasaan pengguna menjadi hal yang penting saat kesalahan tersebut bisa ditangani. Sistem perlu mengkomunikasikan ketika pengguna memasukkan data yang salah.<\/p>\n<\/div>\n

      \n

      Setelah pengguna memasukkan data, microinteractions visual yang bergetar atau kolom isian formulir berlabel merah memberi info kepada pengguna bahwa data tersebut tidak valid dan mendorong pengguna untuk terus berinteraksi mengisi formulir di aplikasi.<\/p>\n

      5. Siap untuk Input Perintah<\/span><\/strong><\/h3>\n
      \n

      Perangkat digital berbasis suara seperti Google Home menggunakan microinteractions untuk mengkomunikasikan cara mereka bekerja. Misalnya ketika Google Home menampilkan animasi titik berbentuk lingkaran untuk memberitahu pengguna bahwa sistem mendengarkan perintah dari pengguna.<\/p>\n<\/div>\n

      \n

      6. Respon Suara<\/span><\/strong><\/h3>\n
      \n

      Tidak hanya visual, banyak produk juga mengandalkan respon suara untuk berkomunikasi dengan penggunanya. Microinteraction saat menghidupkan Apple Mac adalah contohnya. Bisa menggunakan respon tindakan berupa microinteractions dengan audio.<\/p>\n

      Contoh Microinteraction<\/strong><\/h1>\n

      Beberapa contoh micro interaction di antaranya :<\/p>\n

      1. Saat Google Docs memberikan saran penamaan artikel<\/strong><\/h3>\n

      \"\"<\/p>\n

      2. Saat mengubah urutan\u00a0task\u00a0di aplikasi Reminder milik iOS<\/strong><\/h3>\n

      \"\"<\/p>\n

      3. Warna yang senada dengan logo IKEA saat memilih suatu teks<\/strong><\/h3>\n

      \"\"<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n

      \n \n
      \n \n
      \n
      \n \n\n
      <\/div>\n <\/div>\n
      \n \n\n
      <\/div>\n <\/div>\n
      \n \n\n
      <\/div>\n <\/div>\n
      \n \n\n
      <\/div>\n <\/div>\n
      \n \n\n
      <\/div>\n <\/div>\n <\/div>\n \n
      \n
      \n \n\n
      <\/div>\n <\/div>\n
      \n \n\n
      <\/div>\n <\/div>\n
      \n \n\n
      <\/div>\n <\/div>\n
      \n \n\n
      <\/div>\n <\/div>\n
      \n \n\n
      <\/div>\n <\/div>\n <\/div>\n<\/div>\n \n\n
      \n 5\/5 - (2 votes) <\/div>\n <\/div>\n","protected":false},"excerpt":{"rendered":"

      Apa itu UI Microinteractions? UI microinteractions adalah respon visual atau audio yang dilihat pengguna saat melakukan tindakan atau interaksi pada produk. Kata mikro pada microinteractions diartikan sebagai perubahan kecil dan sangat kontekstual pada tampilan visual yang dilihat pengguna. Satu hal yang membuat microinteractions begitu kuat adalah rasa senang yang muncul dari pengguna. Desainer harus memiliki […]<\/p>\n","protected":false},"author":7,"featured_media":9626,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":{"twitter_2392824914_2392824914":""},"rop_publish_now_history":[],"rop_publish_now_status":"pending","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[3],"tags":[3226,3229,3227,3225,3228],"class_list":["post-9614","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-ciri-microinteractions-yang-baik","tag-contoh-microinteractions","tag-komponen-microinteractions","tag-pengertian-ui-microinteractions","tag-ui-microinteractions-pada-produk-digital"],"featured_image_src":{"landsacpe":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/02\/Apa-Itu-UI-Microinteractions_-Contoh-dalam-Produk-Digital-1140x445.gif",1140,445,true],"list":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/02\/Apa-Itu-UI-Microinteractions_-Contoh-dalam-Produk-Digital-463x348.gif",463,348,true],"medium":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/02\/Apa-Itu-UI-Microinteractions_-Contoh-dalam-Produk-Digital-300x169.gif",300,169,true],"full":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/02\/Apa-Itu-UI-Microinteractions_-Contoh-dalam-Produk-Digital.gif",1440,810,false]},"yoast_head":"\nApa Itu UI Microinteractions? Contoh dalam Produk Digital - Hosteko Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Apa Itu UI Microinteractions? Contoh dalam Produk Digital - Hosteko Blog\" \/>\n<meta property=\"og:description\" content=\"Apa itu UI Microinteractions? UI microinteractions adalah respon visual atau audio yang dilihat pengguna saat melakukan tindakan atau interaksi pada produk. Kata mikro pada microinteractions diartikan sebagai perubahan kecil dan sangat kontekstual pada tampilan visual yang dilihat pengguna. Satu hal yang membuat microinteractions begitu kuat adalah rasa senang yang muncul dari pengguna. Desainer harus memiliki […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital\" \/>\n<meta property=\"og:site_name\" content=\"Hosteko Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-20T08:22:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/02\/Apa-Itu-UI-Microinteractions_-Contoh-dalam-Produk-Digital.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"810\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Risa Y\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Risa Y\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital#article\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital\"},\"author\":{\"name\":\"Risa Y\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b\"},\"headline\":\"Apa Itu UI Microinteractions? Contoh dalam Produk Digital\",\"datePublished\":\"2021-02-20T08:22:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital\"},\"wordCount\":852,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/02\/Apa-Itu-UI-Microinteractions_-Contoh-dalam-Produk-Digital.gif\",\"keywords\":[\"ciri microinteractions yang baik\",\"contoh microinteractions\",\"komponen microinteractions\",\"pengertian UI Microinteractions\",\"ui microinteractions pada produk digital\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital\",\"url\":\"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital\",\"name\":\"Apa Itu UI Microinteractions? Contoh dalam Produk Digital - Hosteko Blog\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/02\/Apa-Itu-UI-Microinteractions_-Contoh-dalam-Produk-Digital.gif\",\"datePublished\":\"2021-02-20T08:22:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital#primaryimage\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/02\/Apa-Itu-UI-Microinteractions_-Contoh-dalam-Produk-Digital.gif\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/02\/Apa-Itu-UI-Microinteractions_-Contoh-dalam-Produk-Digital.gif\",\"width\":1440,\"height\":810},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hosteko.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Apa Itu UI Microinteractions? Contoh dalam Produk Digital\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hosteko.com\/blog\/#website\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"name\":\"Hosteko Blog\",\"description\":\"Berita & Informasi Dunia IT\",\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hosteko.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\",\"name\":\"HOSTEKO\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"width\":195,\"height\":57,\"caption\":\"HOSTEKO\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b\",\"name\":\"Risa Y\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g\",\"caption\":\"Risa Y\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Apa Itu UI Microinteractions? Contoh dalam Produk Digital - Hosteko Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital","og_locale":"en_US","og_type":"article","og_title":"Apa Itu UI Microinteractions? Contoh dalam Produk Digital - Hosteko Blog","og_description":"Apa itu UI Microinteractions? UI microinteractions adalah respon visual atau audio yang dilihat pengguna saat melakukan tindakan atau interaksi pada produk. Kata mikro pada microinteractions diartikan sebagai perubahan kecil dan sangat kontekstual pada tampilan visual yang dilihat pengguna. Satu hal yang membuat microinteractions begitu kuat adalah rasa senang yang muncul dari pengguna. Desainer harus memiliki […]","og_url":"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital","og_site_name":"Hosteko Blog","article_published_time":"2021-02-20T08:22:22+00:00","og_image":[{"width":1440,"height":810,"url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/02\/Apa-Itu-UI-Microinteractions_-Contoh-dalam-Produk-Digital.gif","type":"image\/gif"}],"author":"Risa Y","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Risa Y","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital#article","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital"},"author":{"name":"Risa Y","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b"},"headline":"Apa Itu UI Microinteractions? Contoh dalam Produk Digital","datePublished":"2021-02-20T08:22:22+00:00","mainEntityOfPage":{"@id":"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital"},"wordCount":852,"commentCount":0,"publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"image":{"@id":"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/02\/Apa-Itu-UI-Microinteractions_-Contoh-dalam-Produk-Digital.gif","keywords":["ciri microinteractions yang baik","contoh microinteractions","komponen microinteractions","pengertian UI Microinteractions","ui microinteractions pada produk digital"],"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital","url":"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital","name":"Apa Itu UI Microinteractions? Contoh dalam Produk Digital - Hosteko Blog","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital#primaryimage"},"image":{"@id":"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/02\/Apa-Itu-UI-Microinteractions_-Contoh-dalam-Produk-Digital.gif","datePublished":"2021-02-20T08:22:22+00:00","breadcrumb":{"@id":"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital#primaryimage","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/02\/Apa-Itu-UI-Microinteractions_-Contoh-dalam-Produk-Digital.gif","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/02\/Apa-Itu-UI-Microinteractions_-Contoh-dalam-Produk-Digital.gif","width":1440,"height":810},{"@type":"BreadcrumbList","@id":"https:\/\/hosteko.com\/blog\/apa-itu-ui-microinteractions-contoh-dalam-produk-digital#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hosteko.com\/blog"},{"@type":"ListItem","position":2,"name":"Apa Itu UI Microinteractions? Contoh dalam Produk Digital"}]},{"@type":"WebSite","@id":"https:\/\/hosteko.com\/blog\/#website","url":"https:\/\/hosteko.com\/blog\/","name":"Hosteko Blog","description":"Berita & Informasi Dunia IT","publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hosteko.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hosteko.com\/blog\/#organization","name":"HOSTEKO","url":"https:\/\/hosteko.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","width":195,"height":57,"caption":"HOSTEKO"},"image":{"@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b","name":"Risa Y","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g","caption":"Risa Y"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/02\/Apa-Itu-UI-Microinteractions_-Contoh-dalam-Produk-Digital.gif","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/9614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/comments?post=9614"}],"version-history":[{"count":3,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/9614\/revisions"}],"predecessor-version":[{"id":9633,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/9614\/revisions\/9633"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media\/9626"}],"wp:attachment":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media?parent=9614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/categories?post=9614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/tags?post=9614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}