UX/UI Tasarımı: Aslında çalışan tuzaklar ve ipuçları

UX/UI dekorasyon değil, temel

Özel e -öğrenme dünyasında, tek başına iyi içerik yeterli değildir. Öğrenciler, öğrenme deneyimlerini engellemeyen sezgisel, ilgi çekici ve erişilebilir platformları beklerler. UX/UI burada devreye giriyor. Öğretim tasarımcıları için EdTech'teki UX/UI tasarımcıları ve e -Öğrenimler için e -öğrenmede kullanıcı deneyimine hakim olmak isteğe bağlı değil.

Bu makalede, e-Öğrenim tasarımındaki yaygın tuzakları keşfedeceğiz, kesintisiz UX/UI hazırlamak için en iyi uygulamaları yıkacağız ve bu ilkelerin nasıl çalıştığını gösteren gerçek dünya örnekleri boyunca vurgulayacağız.

Yoksul kullanıcı arayüzü e -öğrenmede

Açıkça başlayalım: görsel düzenleme eksikliği motivasyonu öldürür.

En iyi yazılmış içerik ve en özel öğrenme yolculuğu ile bile, öğrencilerin motivasyonu, mülayim ile tasarlanmış bir kursta karşılaştıklarında düşebilir. Çoklu değişkenler bu yumuşaklığı etkilemek için faktör, bu yüzden ortak olanları inceleyelim.

1. dengesiz bir metin-grafik / renk oranı

Öğrencilerin herhangi bir anda sınırlı bir dikkat süresi ve hafızası vardır. Bu nedenle, daha büyük metin bedenleri ve daha az görsel molalar (sanatsal veya bilgilendirici olsun) anlama görevini hızla can sıkıntısı ile mücadele mücadelesine dönüştürebilir.

Çok fazla yazı tipi kullanmak, yeterli boşluk, çok fazla renk veya çok az renk ekrandaki dengeyi etkileyebilir. Buradaki en iyi uygulama, harika içeriğinizi tamamlayan görselde denge sağladığınızdan emin olmaktır. Projeniz için birincil ve ikincil renkler ve renk kullanım oranları gibi ana unsurları içeren bir stil kılavuzu oluşturmak yardımcı olur. Ayrıca, gittiğiniz grafik stilini de ekleyebilir ve gerçek içerik içinde metin bloklarıyla nasıl çalışabileceğini gösterebilirsiniz.

Birincil ve ikincil renklerinizi seçtikten sonra, her birinin ne kadar kullanılacağını tanımlayın. Net oranlar belirleme, içeriğinizde tutarlı, görsel olarak dengeli bir stil oluşturmaya yardımcı olur.

2. Belirsiz ve tutarsız bir tasarım dili

Harika kullanıcı arayüzü tasarımı arka planda kaybolmalıdır. Öğrenciler platformla nasıl etkileşime gireceklerini bulmakla meşgulse, ne öğrenmeleri gerektiğine odaklanmıyorlar.

Kullanıcı arayüzünüzü bir sisteme dayandırdığınızdan emin olmak, hiçbir renk, boyutlandırma, yerleştirme vb. Karar verilmemesini sağlam olacaktır. İyi bir ipucu, Google'ın malzeme tasarımı gibi farklı kullanıcı arayüz sistemlerini incelemek ve mevcut yapı taşlarını kendi yararınıza kullanmaktır. Bu, kullanıcı arayüzüne ihtiyaç duyduğunuz her şey, ister düğmeleri ve temanızı veya oyunlaştırılmış bir etkileşimli paketin özelleştirebileceğiniz bir kursu olsun, herhangi bir e -öğrenme projesi için düzgün ve tutarlı bir şekilde yürütülmesini sağlar.

Bunun bir örneği, projenizdeki her düşünülebilir sayfa veya slayt için şablonlar oluşturmak ve oluşturduğunuz sistemin içeriğinizin nasıl yapılandırılabileceğinin çeşitli olasılıklarını hesapladığından emin olmaktır.

Bu, tüm bileşenlerin birleşik bir kullanıcı deneyiminde nasıl hizalandığını ve etkileşime girdiğini göstermek için tasarım yazılımı (bu durumda Figma) kullanarak çeşitli sayfa öğelerinin nasıl düzenli bir düzende düzenleneceğini sergiler.

3. Mobil kullanıcıların yüzdesini reddeden masaüstü kullanımı için optimize edilmiş mükemmel bir şekilde kurulmuş bir kurs

Bu, diğer platformlar arasında son derece özelleştirilebilir yazma araçları ile ilgilidir. Artık daha küçük ekranlar için tasarım için isteğe bağlı değildir. Buradaki amaç, mümkün olan en küçük ekrandan başlamak ve daha sonra tasarımlarınızı daha büyük olanlara uyarlamaktır. Bu, yazı tipi boyutlandırma, tıknaz ve dağınık düzenler, sadece gelişim etkileşimleri ve küçük musluk alanlarından kaçınılmasını sağlar. Bu aynı zamanda düğme boyutlandırmanızın yanı sıra bir seferde görünen metin miktarını da bilgilendirir. Bunun çok özel bir örneği, tamamen etkileşimli kurslar oluşturmak için eklem hikayesi gibi yazılımları kullanmaktır. Bu yazılım çok fazla özelleştirilebilirlik ve çok çeşitli işlevler ve kodlama sunarken, tasarladığınız şey ekran boyutu ne olursa olsun elde ettiğiniz şeydir. Bu nedenle, etkileşimlerinizi sadece masaüstü parametrelerine göre tasarlamak en iyi uygulama olmaz, çünkü mobil cihazlarda görüldüğünde büyük olasılıkla kötü bir şekilde tercüme edilecektir.

Özel bir kullanıcı arayüzü ile eklem hikayesinde inşa edilmiş bir kursun ekran yakalanması. Not: Mobil cihazlarda kolay etkileşim sağlamak için düğmeler gibi dokunun en az 38×38 piksel olmalıdır.

4. Zayıf bir görsel hiyerarşi

Bu, projeniz için oluşturduğunuz sisteme geri döner. İçerik yapısını görsel olarak tanımlamayan bir kurs, kafa karıştırıcı değilse kolayca sıkıcı olabilir. Uygun bir stil ölçeğini kullanmak yeterli netlik olmasını sağlayacaktır. Ve bu sırada, en az iki ölçeğiniz olduğundan emin olmanız gerekir: bir masaüstü ve mobil bir. Ve buradaki en iyi uygulama, biri başlıklar için, diğeri gövde metni ve düğmeler için olmak üzere iki yazı tipi kullanmaktır. Bu kural, baskı yapımının icadından bu yana denenmiş ve test edilmiştir ve öğrencilerin dersinizin bölümlerini daha kolay tanımlamalarına ve öğrenme yolculuğuna kendilerini demirlemelerine yardımcı olur. Dikkatli olmanız gereken bir diğer nokta, uygulanabilir olduğunda farklı dillerdeki yazı tipi boyutlarını hesaba kattığınızdan emin olmaktır. Nokta veya piksel boyutları bir yazı tipinden diğerine ve bir dilden diğerine değişir. Bu nedenle, 16px mobil yazı tipi boyutu için kural olsa da, tüm dillerde ve yazı tipi seçeneklerinde zorunlu değildir. Test etmek ve karşılaştırmak için zaman ayırın.

Mobil ve masaüstü için metin stili ölçeklerinin bir örneği.

5. Ayrıntılara yeterince dikkat

Yukarıdaki tüm noktalara baktıktan sonra, animasyonların, geçişlerin ve geri bildirim animasyonlarının düşünceli kullanımı, arayüzün daha canlı ve duyarlı hissetmesini sağlayabilir. Bir modül tamamlandığında bir onay işareti gibi veya etkileşimli öğeler üzerinde dolaşırken ince bir hareket gibi, animasyonları az miktarda kullanma, öğrenci için daha iyi bir deneyim yaratacaktır.

Artık UI ağrı noktalarını ele aldığımıza göre, bazı UX tuzaklarına dikkat etmenin öğrenme yolculuğunu nasıl yükseltebileceğine bakalım.

Yoksul UX'in E -Öğrenimdeki Tuzakları

1. kullanıcı merkezli olmayan tasarım

Uygun bir araştırma olmadan bir öğrenme yolculuğu tasarlamak ve öğrencilerinizin iyi anlaşılması, boşa harcanan zaman, çaba ve kaynaklara dönüşebilir. Bundan kaçınmak için, öğrenciyi göz önünde bulundurarak başlayın. Hedeflerini, zorluklarını, teknoloji alışkanlıklarını ve erişilebilirlik ihtiyaçlarını anlayın. Öğrenci kişileri oluşturmak, öğrenme tercihlerini ve hedeflerini ayarlamanıza yardımcı olur ve öğrencilerin ağrı noktaları etrafında çalışmanıza olanak tanır. Öte yandan, kullanıcı yolculuğunun eşlenmesi sizi başlarına yerleştirir ve önceliğin önemli olana ayarlanmasını sağlar. Bu, verilen kararları doğrular ve alaka, motivasyon ve elde tutmayı artırır.

2. Öğrenme yolculuğu sırasında zayıf zamanlanmış açıklamalar veya talimatlar

Yeni bir çevrimiçi kurs başlattığınızı düşünün ve giriş ile başlamadan önce, henüz etkileşime girmediğiniz öğeler hakkında mesajlar ve talimatlar alırsınız. Bu, oyunlaştırılmış kurslar için güçlü bir şekilde geçerlidir. Ve bunlar uygun oyun UX kullanılarak tedavi edilmelidir. Öğrencinizi aşamalı olarak işe almayı ve yalnızca yolculuk ilerledikçe ilgili talimatları veya ipuçlarını dağıtmayı düşünün. Yolculuk haritası iyi yürütülürse bu kolayca elde edilebilir. O aşamada ne kadar ve ne zaman açıkladığınızı sağlayabilirsiniz. Bunun tanımlanabileceği bir diğer aşama, kullanıcı testi sırasında kullanıcılardan kurs ile ilgili geri bildirim toplayabileceğinizdir.

İçeriği aşamalı olarak ortaya koyan bir kurs örneği, öğrencileri odağı sürdürmek ve bilişsel aşırı yükten kaçınmak için adım adım yönlendirir.

3. Uzun okumalar, mola yok ve pasif bilgi dökümü

Görünürde görünen bir son olmadan içerikten geçmek, öğrencinin kurslarını tamamlamasını engelleyebilir. Mikro -öğrenme, hızlı, sindirilebilir içerik parçalarını tercih eden modern öğrencileri destekler. Ayrıca, daha iyi bilgi tutma için aralıklı tekrarlama ile iyi hizalanır. Bunu başarmak için, her biri tek bir öğrenme hedefine odaklanan 3-7 dakika uzunluğunda modüller tasarlamak gitmenin yoludur. Ayrıca, öğrenme yolculuğuna açık bir set ritmi olduğunda da yardımcı olur. Öğrenciler sadece “izle” yerine “yaptıklarında” nişan skrockets. Etkileşim kavramları güçlendirir ve öğrencileri merak eder. Bir örnek, kısa senaryo tabanlı içerik ve ardından bilgileri tekrar özetlemeye ve daha hızlı korumaya yardımcı olan kısa sorular sunmaktır. Diğer taktikler şunları içerir:

• Gamifikasyon (puan, rozet, skor tabloları)
• Dikkat çekmek için animasyonlu geçişler
• Mikro etkileşimler (Hover efektleri, görsel geri bildirim)

Öğrencilerin ilgi alanlarını keşfetmelerine ve onları gerçekten yönlendirenleri ortaya çıkarmasına yardımcı olmak için tasarlanmış etkileşimli bir etkinliğin ekran yakalanması.

4. Erişilebilirlik ve Kapsayıcılık

Erişilebilirlik sadece uyum değildir; Bu bir fırsat. Engelli kullanıcılar için tasarım yaratıcılığı zorlar ve içeriği herkes için daha iyi hale getirir.

Takip edilecek WCAG ilkeleri: Tüm görseller için alt metin sağlayın, medya için transkriptleri ve altyazıları kullanın, klavye gezinmesinin sorunsuz çalışmasını, renk kontrastını ve ölçeklenebilir metni korumasını sağlayın.

Yaratıcı İpucu: Erişilebilirlik sıkıcı anlamına gelmez. Her tür için öğrenmeyi zenginleştirmek için dokunsal geri bildirim, ses ipucu veya görsel ilerleme çubukları kullanın.

Erişilebilirlik test araçlarını kullanmak, tasarım seçeneklerinizin uyum standartlarını karşılamasını ve daha da önemlisi, tüm öğrenciler için kapsayıcı, kullanıcı dostu bir deneyim yaratmalarını sağlamaya yardımcı olur.

Sarma: UX/UI stratejik bir avantajdır

E -öğrenmede UX/UI dekorasyon değildir; Temel. Harika bir kurs tasarımı formu ve işlevi dengeler. Öğrenmeyi kolay, ilgi çekici ve kapsayıcı hale getirir. Ve doğru yapıldığında, gerçek sonuçları yönlendirir: daha iyi tutma, daha yüksek tamamlama ve güçlendirilmiş öğrenciler.

Özel e -öğrenmenizi geliştiriyorsanız veya geliştiriyorsanız, şu konulara odaklanın:

1. Sistem için değil öğrenci için tasarım
2. Net, basit ve etkileşimli tutmak
3. Bir sınırlama değil, bir güç olarak erişilebilirliği sağlamak
4. Başından beri mobil kullanılabilirliğe öncelik vermek

Kashida'da, bu ilkeleri göz önünde bulundurarak inşa ediyoruz, çünkü tasarım sadece nasıl göründüğü değil, her öğrenci için ne kadar iyi çalıştığı hakkında.