Bir mükemmellik temeli oluşturmak: Intercom'un harika etkileşim tasarımının 9 temeli

Tasarım topluluğu artık masaya oturmak için tasarımın değerini kanıtlamak zorunda değil. Tasarımcılar tasarımın iş başarısının merkezi bir direği olabileceğini gösterdiler. Ama aynı zamanda yol boyunca bir şey kaybettiler.

Tasarımcılar, kaygan, ancak etkisiz ve pratik olmayan tasarımın yapıldığı adalarından ayrıldılar. İşlevler arası ilişkileri benimsediler ve tüm kuruluştaki ortaklarla yakın bir şekilde çalışıyorlar. Müşterilerinin kim olduğunu ve neye önem verdiklerini her zamankinden daha fazla anlıyorlar. Hedefler değil, sistemler tasarlarlar. Ve öncelikle arayüzleri düşünmek yerine, ürün stratejisini düşünüyorlar. İş sonuçları için tasarlarlar.

Ancak, tüm bu ek yapı ürünleri katmanlarının derinliklerine indiğinizde, tasarımcıların uzman olduğu şeyi de çivilemenin önemini unutmak kolaydır: etkileşim tasarımı, kullanıcı ve ürün arasındaki etkileşimlerin optimizasyonu.

Bu konuyu kendi tasarım ekibimizde fark ettiğimizde, iyi etkileşim tasarımının temellerini oluşturduk. Bizim için çok önemli olan ama bazen unutulan şeyleri hatırlatıyorlar.

Bu hiçbir şekilde kapsamlı bir liste değildir ve ürün tasarım ilkelerimizi içerdikleri için her şirket için evrensel değildir. Bunlar, Intercom'da önemsediğimiz temel bilgilerdir. Ama umarım sizin için bir hatırlatma görevi görebilirler ve belki de şirketiniz için önemli olan etkileşim tasarımının temelleri hakkında düşünmenizi sağlayabilirler.

1. Aynı nesneyi her yerde tanıdık bir şekilde sunun

İnterkom, geniş genişliği ve derinliği ile bunaltıcı gelebilir. Sistemdeki temel nesneleri (örn. konuşmalar, kullanıcılar, mesajlar vb.) kolayca tanınabilir hale getirerek ve her yerde aynı şekilde davranmalarını sağlayarak müşterilerimizin işini kolaylaştırabiliriz. Tanıma, hatırlamaktan daha kolaydır.

Yapmak
Bir nesneyi her yerde aynı şekilde gösterme varsayılanı. Sapmak için güçlü bir gerekçeniz olduğunda, bunu tanıdık hissettirin ve nesnenin ürünün başka bir yerinde farklı bir şekilde gösterilmesinin gerekip gerekmediğini düşünün.

yapma
Başka bir yere yansıtılmayan veya diğer bağlamlarla tutarsız olan yerel optimizasyonlar yapın. Aynı nesnenin birden çok benzer, ancak biraz farklı varyasyonlarını oluşturmayın.

Sormak:

• Bu nesne ürünün başka bir yerinde nasıl gösteriliyor?
• Aynı bileşeni burada tekrar kullanabilir miyiz?
• Değilse, nasıl tanıdık hissettirebiliriz?
• Ürünün başka bir yerinde güncellememiz gerekiyor mu?

2. Arayüzünüzde hiyerarşi oluşturun

Net bir görsel hiyerarşi kurarak müşterilerimizin ürünün nasıl çalıştığını, farklı parçalar arasındaki ilişkileri, neyin önemli olup neyin olmadığını anlamalarına yardımcı olabiliriz.

Yapmak
Arayüzün farklı bölümleri arasındaki hiyerarşiyi ve ilişkileri net bir şekilde iletmek için boşluk, tipografi, gruplama ve girinti kullanın.

yapma
Ayırt edilebilir gruplara sahip olmadan farklı hiyerarşi seviyeleri arasındaki çizgileri bulanıklaştırın. Kutuların içinde çok fazla kutu oluşturmayın.

Sormak:

• İçerik net, ayırt edilebilir gruplar halinde mi düzenlenmiş?
• Bu gruplar arasında yeterli boşluk var mı?
• İlgili bilgiler birlikte gruplandırılmış mı?
• Bilgi hiyerarşisi oluşturmak için doğru metin stilleri kullanılıyor mu?

3. Görsel ritim ve denge yaratın

Müşterilerin hızlı bir şekilde anlamasına yardımcı olmak için arayüzünüzü kolayca taranabilir hale getirin. Estetik açıdan hoş hale getirmek, ne kadar kullanışlı olduğuna dair algılarını artırabilir.

Yapmak
Arayüzünüzün en önemli bölümünü sabitleyin ve tasarımınızı dengelemek ve taramayı kolaylaştırmak için farklı stiller ve düzenler kullanın. Bir ızgara sistemi kullanın ve hizalamaya çok dikkat edin.

yapma
Her şeyi düz bir listede düzenleyin. Aşırı uzun cümleler veya satırlar kullanmayın.

Sormak:

• Tasarımı taramak ve en önemli kısmının ne olduğunu bilmek kolay mı?
• Görsel olarak dengeli hissettiriyor mu?
• Arayüz bir ızgara sistemine uyumlu mu?

4. Yaygın olarak kabul edilen kalıpları ve etkileşimleri kullanın

Müşterilerimizin Intercom'a daha aşina olmalarına ve öğrenmeleri gereken etkileşim kalıplarının miktarını sınırlayarak daha verimli kullanmalarına yardımcı olabiliriz.

Yapmak
Tasarım sistemimizdeki mevcut kalıpları kullanın. Akıllı ısmarlama optimizasyonlar yerine ortak etkileşim tasarım modellerini tercih edin. Endüstri standardı etkileşim tasarımı ilkelerini takip edin.

yapma
Mevcut tasarım sistemi modellerimizin benzer, ancak farklı varyasyonlarını tanıtın. Yerleşik bir endüstri standardı olduğunda özel desenler oluşturmayın. Mevcut bir kalıbı kötüye kullanmayın.

Sormak:

• Mevcut bir tasarım sistemi modeli burada kullanılabilir mi?
• Değilse, bunun için endüstri standardı model neye benziyor?
• Yeni bir kalıba ihtiyacınız olduğunu düşünüyorsanız, tasarım sistemleri ekibi ve diğer tasarımcılarla görüştünüz mü? Bu model, diğer tasarımcıların kullanması için tasarım sistemine geri beslenebilir mi?
• Desenin nasıl etkileşime girebileceği açık mı?
• Kullanıcılar onunla etkileşim kurduğunda net bir geri bildirim var mı?

5. Aşamalı açıklamayı kullanın

Aşamalı açıklamayı kullanarak, gelişmiş müşterilerimiz için daha fazla esneklik sağlarken Intercom'u müşterilerimizin çoğu için basit hale getirebiliriz.

Yapmak
Basit varsayılanlarla başlayın ve kademeli olarak esnekliği ortaya çıkarın. En yaygın kullanım durumu için optimize edin.

yapma
Hemen tam esneklik göstererek müşterileri bunaltın. Uç durumlar için en yaygın kullanım durumundan ödün vermeyin.

Sormak:

• En yaygın kullanım durumu nedir?
• Çoğu kişinin bunları değiştirmek zorunda kalmaması için varsayılan ayarlar ne olmalıdır?
• Bilgileri aşamalı olarak nasıl ortaya çıkarabiliriz?
• Bir uç durum için en yaygın kullanım örneğinden taviz mi veriyoruz?

6. Açık ve öz olun

Dil, müşterilerimizin Intercom'un nasıl çalıştığını anlamalarına yardımcı olmanın anahtarıdır. Ancak, çok fazla içerik, müşterilerin sayfayı okumadan taramaları ve bu nedenle yapmaları gerekeni gerçekleştirememeleri nedeniyle tam tersi bir etkiye sahip olabilir.

Yapmak
Açık ve net olun. Gerektiğinde, daha fazla bilgi edinmek için yardımcı belgelere yönelik araç ipuçlarını ve bağlantıları kullanarak bilgileri aşamalı olarak ortaya çıkarın. Fikirleri açıklamak için çizimler kullanın. Acımasızca düzenleyin.

yapma
Bir şeyin nasıl çalıştığını açıklamak için uzun, ayrıntılı içerik kullanın. Bunun yerine, onu neyin karmaşık hale getirdiğini düşünün ve altında yatan sorunu düzeltin. Teknik olarak doğru, ancak anlaşılması zor olma tuzağına düşmekten kaçının.

Sormak:

• İçeriğin tamamını baştan sona okumak zorunda kalmadan taramak ve ne olduğunu anlamak kolay mı?
• Ya içeriğin yarısını kesmek zorunda kalsaydınız? Anlamını kaybetmeden yapabilir misin?
• Değer önerisi açık mı?
• Kullanıcının ne yapması gerektiği açık mı?
• Bu, içerik hakkında önceden bilgisi olmayan biri için net olacak mı?
• İçerikle anlatmak yerine görsel olarak ne anlatabiliriz?

7. Duyarlılığı ve hızı düşünün

Performans, dikkatle değerlendirilmesi gereken bir özelliktir. Göz ardı edildiğinde veya yanlış yönetildiğinde, belirsizlik ve hantal bir kullanıcı deneyimi yaratır.

Yapmak
Kullanıcılara ürünle etkileşime girdiklerinde anında geri bildirim verin ve bekleme sürelerine ilişkin beklentileri belirleyin.

yapma
Yükleme durumlarını unutun.

Sormak

• Arayüzle etkileşime girdikten hemen sonra ne olur?
• İşlemin alındığı ve şu anda işlendiği açık mı?
• İşlemin ne zaman tamamlanacağı belli mi?

8. Kullanıcıları bir sonraki adımda ne yapmaları gerektiği konusunda yönlendirin

Genellikle mutlu yol için tasarım yaparak başlarız, ancak çoğu müşteri bunu ilk kez böyle deneyimlemez. Açık bir rehberlik olmadan mutlu yola hiç ulaşamayabilirler. Harika etkileşim tasarımının devreye girdiği yer burasıdır.

Yapmak
Kullanıcıların bundan sonra ne yapması gerektiğini netleştirin ve bunu başarmayı kolaylaştırın. Özellikle boş durumları, hata mesajlarını ve son durumları göz önünde bulundurun.

yapma
Kullanıcıların bir sonraki adımda ne yapacaklarını kendilerinin bulması gereken çıkmaz sokaklar yaratmayın.

Sormak

• Gösterilecek veriniz yoksa ne olur?
• Bir hata olduğunda ne olur?
• Kullanıcının bundan sonra ne yapması gerektiği açık mı?

9. Erişilebilirliğe dikkat edin

Erişilebilirlik için henüz standartlar oluşturmamış olsak da, tasarımınızı daha erişilebilir kılmak için yapabileceğiniz birçok şey var.

Yapmak
Erişilebilir hale getirildiklerinden mevcut tasarım sistemi bileşenlerini kullanın. Kolayca okunabilen metin stilleri ve boyutları kullanın. Yeterli renk kontrastı ekleyin. Anlamı iletmek için tek başına rengi kullanmayın.

yapma
Tasarım sistemleri ekibiyle konuşmadan yeni renkler veya metin stilleri sunun. Erişilebilir olmayabilecekleri için özel bileşenleri tanıtmaktan kaçının.

Sormak:

• Kullanabileceğiniz mevcut bir tasarım sistemi bileşeni, rengi veya metin stili var mı?
• Metin yeterince okunaklı mı?
• Yeterli kontrast var mı?
• Anlamı iletmek için kullanılan renkten daha fazlası var mı?

Temel zanaatımıza odaklanın

Ürün tasarımı disiplini yıllar içinde çok olgunlaşmış olsa da, temel zanaatımızı unutmamamız veya önceliklerini kaybetmememiz önemlidir. Müşteri ve iş ihtiyaçlarına artan odaklanma, kötü etkileşim tasarımı için bir bahane olmamalıdır. Bunlar gibi tasarım temelleri, etkileşim tasarımı kalitesi için bir temel oluşturmaya, korkunç hatalardan kaçınmaya yardımcı olur ve nihayetinde müşteri odaklı mükemmel yazılımlar oluşturmak için bir temel görevi görür.

Bu, başlangıçta tasarım ekibimiz için dahili bir belge olarak yazılmıştır. Bunun gibi daha fazla içerikle ilgileniyorsanız, daha fazla içerik ve açık rollerimiz için ürün tasarım sayfamıza göz atın.