Dil Öğrenme Uygulaması Tasarımı: Ana Ekran Yeniden Tasarımı, Önce ve Sonra

Bir dil uygulamasının ana ekranında tek bir işi vardır: öğrenciyi bugünün dersine sokmak. Aşağıdaki ilk taslakta öğrencinin ihtiyaç duyduğu her şey var, ama okul karnesi gibi okunuyor. İstatistikler tek bir gri cümle, ünite yüzdeli on iki eşit satır, gürültülü bir banner abonelik satıyor ve sıradaki adım altta küçük bir DEVAM ET.

Düzeltme her işlevi korur, yalnızca görünüşünü ve yerini değiştirir. İstatistikler dört sade sayaç olur, ünite dolu bir banner olur, liste düğümlerden oluşan bir yola dönüşür ve tek bir balon Başla der.

Tüm ekran, önce ve sonra

Junior taslağı

Düzeltilmiş

Solda her şeyin ağırlığı aynı. 9 px'lik istatistik satırı, gürültülü sarı banner, on iki satır ve DEVAM ET düğmesi aynı anda dikkat istiyor ve hiçbiri "önce bana dokun" demiyor.

Sağda ekran yukarıdan aşağıya öğrencinin düşündüğü sırayla okunuyor: nasıl gidiyorum, bu hangi ünite, ünitede neredeyim, neye dokunacağım. Tek yol, tek balon ve tek eylem var.

Ne değişti, ölçülerle

Düzeltme 1: İstatistikleri tek sade satırda tut

Önce

Sonra

Taslağın başlığı: Hola Kursum, altında İspanyolca kursu ve 41 günlük seri, bir İspanyolca açılır menüsü, ardından Seviye A2 62.5%, XP 1240, Kalpler 4/5, Elmaslar 320, Lig Gümüş yazan gri bir çubuk, sonra YÜKSELT düğmeli ve ilk aya %50 indirim yazan ŞİMDİ PLUS'A GEÇ sarı bannerı. Karşısında tek bir satır: bir İspanya bayrağı, 41 yazan bir alev, 320 yazan bir elmas, 4 yazan bir kalp ve küçük sarı bir PLUS etiketi.

Taslak istatistiklerini cümle olarak yazıyor: "Seviye A2 62.5% | XP 1240 | Kalpler 4/5 | Elmaslar 320 | Lig Gümüş". 9 px, gri ve metin gibi okunması gerekiyor. Uygulamayı her gün açan bir öğrenci kendi sayılarını okumak istemez, onlara göz atmak ister.

Düzeltme her sayıya bir simge ve bir renk verir: 41 günlük seri için alev, 320 için elmas, 4 için kalp. Hepsi tek satırda 16 px kalın durur, böylece göz onları tek seferde toplar. İspanyolca açılır menüsü, dil listesini açan bayrak olur. 50% indirimli ve YÜKSELT düğmeli "ŞİMDİ PLUS'A GEÇ!!!" bannerı, satırın sonunda küçük bir PLUS etiketine dönüşür ve teklif ondan açılır.

Seviye, XP ve Lig Gümüş Profil sekmesine taşındı. Önemliler, ama uygulama her açıldığında değil.

Yeniden kullanılacak kural: öğrencinin her gün baktığı sayıları simge olarak göster, gerisini bir dokunuş uzağa taşı.

Düzeltme 2: Üniteye dolu bir banner ver

Önce

Sonra

Ünite 3 kalın, Yemek Sipariş Etme gri yazılmış, sağda altı çizili bir Rehber bağlantısı olan bir metin satırı. Karşısında küçük büyük harflerle BÖLÜM 1, ÜNİTE 3, 20 px beyaz Yemek Sipariş Etme, ince bir ayırıcı çizgi ve kitap simgesi olan, altında daha koyu bir kenar bulunan dolu mor bir banner.

Taslakta ünite bir etiket. "Ünite 3" ve "Yemek Sipariş Etme" bir metin bağlantısıyla aynı satırda duruyor ve hiçbir şey, bunun altındaki her şeyin ait olduğu başlık olduğunu söylemiyor.

Düzeltme onu bir banner yapar: 350 x 76, köşe yarıçapı 12, marka moru, 20 px başlık ve basılabilir gösteren 4 px daha koyu alt kenar. Ekrandaki tek büyük renk bloğu bu, yani öğrenci okumadan hangi ünitede olduğunu bilir. Rehber bağlantısı sağda, ince bir ayırıcının arkasındaki kitap simgesi olur, yani hâlâ tek dokunuş uzakta.

Yeniden kullanılacak kural: bir ekranda altındaki her şeyin ait olduğu bir başlık varsa ona metin satırı değil, renk bloğu ver.

Düzeltme 3: Listeyi yola çevir

Önce

Sonra

Bir listede on iki satır, her birinde bir simge, bir isim ve sağda XP ile yüzde: üçü mor işaretli ve 100%, İçecek Sipariş Etme oynat simgeli ve 0%, ardından Ana Yemekler'den Ünite Tekrarı'na kadar gri kilitli ve 0% olan sekiz satır. Karşısında beş iri dairenin kıvrımlı bir yolu: iki mor işaretli düğüm, sarı halkalı bir mor yıldız düğümü ve iki gri kilitli düğüm.

Bütün ekranı taşıyan düzeltme bu. Taslakta her ders, 11 px isimli ve iki adet 9 px sayılı tek bir 42 px satır. Aynı boyutta on iki satır, on iki şeyin eşit derecede önemli olduğunu söylüyor ve öğrenci bitmemiş olanı kendisi bulmak zorunda.

Yol bunu yalnızca şekil ve renkle söyler. Biten düğümler işaretli mordur, mevcut düğüm yıldızlı ve ilerleme halkalı mordur, kilitliler kilitli gridir. Her düğüm 5 px daha koyu alt kenarla 64 px'dir, mevcut olanın etrafındaki halka 92 px'tir ve on iki dersten üçü sarıyla doludur. Ünitenin durumunu odanın karşısından, metin olmadan okuyabilirsin.

Hiçbir şey kaybolmadı. İsimler düğümlerden açılır, XP mevcut ders için balonda gösterilir, 100% işarete, 0% kilide dönüştü. Diğer dersler yolun ilerisinde. Duolingo bu yolu öğrenme uygulamaları için standart yaptı ve burada da aynı nedenle işe yarıyor: ilerleme okuduğun bir şey değil, boyunca yürüdüğün bir şey.

Yeniden kullanılacak kural: öğelerin bir durumu ve sırası varsa durumu şekil ve renkle, sırayı konumla göster.

Düzeltme 4: Mevcut düğüme tek bir Başla balonu koy

Önce

Sonra

Listenin altında, sağ altta büyük harflerle DEVAM ET yazan küçük mor bir düğme. Karşısında ince çerçeveli, İçecek Sipariş Etme ve Başla, 12 XP yazan, sarı halkasının içindeki mor yıldız düğümüne aşağı bakan bir işaretçisi olan beyaz bir balon.

Taslakta sıradaki adım, on iki satırın altında 91 x 30 bir DEVAM ET düğmesi. Başlattığı dersten uzak, bu yüzden öğrenci ikisini kendisi bağlamak zorunda. Ayrıca yukarıdaki YÜKSELT düğmesiyle aynı şekilde büyük harflerle yazılmış, yani ana eylem gibi görünmüyor.

Düzeltme eylemi, üzerinde işlem yaptığı şeyin üstüne koyar. Mevcut düğümün üstündeki bir balon dersi "İçecek Sipariş Etme" diye adlandırır ve "Başla · 12 XP" der. 2 px ince çizgisi var ve gölgesi yok, yani yolun bir parçası gibi okunur. Yalnızca mevcut ders adlandırılır, bu yüzden dokunulacak tek bir şey vardır.

Yeniden kullanılacak kural: ana eylemi etki ettiği nesnenin yanına koy ve eylemde nesnenin adını an.

Daha küçük düzeltmeler

• Her işlev yerinde. İspanyolca açılır menüsü bayrak oldu. Kursum başlığı Öğren sekmesi oldu. Lig Gümüş ve Lig sekmesi Profil sekmesine taşındı. Teklif PLUS etiketinden açılır.
• Tek kenar boşluğu. Taslakta solda 14 px, sağda 12 px var. Düzeltilmiş ekran iki yanda 20, bloklar arasında 16 kullanır.
• Tek vurgu çifti. Mor (#7C3AED) banner ve düğümlerdeki eylem rengidir. Güneş sarısı (#FFC53D) yalnızca ilerleme halkası ve PLUS etiketidir.
• Yazı ölçeği. Taslak 9 ile 15 px arasında. Düzeltilmiş ekran daha büyük: 16 px sayaçlar ve 20 px ünite başlığı.
• Düz bir sekme çubuğu. Dolu ve çizgili simgelerin karıştığı beş sekme, etiketsiz tek stilde dört simge oldu.
• Gölge yok. Derinlik gölgelerden değil, daha koyu 4 ve 5 px alt kenarlardan gelir.

Kendi öğrenme ekranını denetle

Figma dosyasını al

Ücretsiz dosyada junior taslağı, düzeltilmiş ekran ve her parça bileşen olarak var.

Ücretsiz Figma dosyası

Dil öğrenme ekranı yeniden tasarımı, önce ve sonra

Her iki ekran ve her parça Figma bileşeni olarak. Ücretsiz, yalnızca görüntüleme, taslaklarına çoğalt.

Figma'da aç

SSS

Bir dil öğrenme uygulamasının ana ekranı nasıl tasarlanmalı?

Üstte birkaç sade sayaç, dolu bir ünite bannerı, durumu renk ve şekille gösterilen ders düğümlerinden bir yol ve mevcut derste tek bir Başla balonu göster. Öğrenci nerede olduğunu ve neye dokunacağını okumadan görebilmeli.

Dil uygulamaları neden liste yerine yol kullanıyor?

Yol, durumu ve sırayı tek bakışta gösterir. Biten, mevcut ve kilitli dersler farklı görünür, bu yüzden öğrenci sıradakini bulmak için on iki satır okumak zorunda kalmaz.

Bir dil uygulaması ana ekranda hangi istatistikleri göstermeli?

Öğrencinin her gün baktıklarını: seriyi, elmasları veya puanları ve kalpleri. Seviye, XP ve lig profil sekmesinde durabilir.

Bir öğrenme uygulamasında yükseltme teklifi nereye konmalı?

İstatistik satırında teklifi açan küçük bir etiket olarak. Derslerin üstündeki büyük bir banner, dikkat için dersle yarışır.

Bir ders düğümü ne kadar büyük olmalı?

Yaklaşık 64 px, rahat bir başparmak hedefi. Düzeltilmiş ekran 5 px daha koyu alt kenarlı 64 px düğümler ve mevcut olanda 92 px'lik bir halka kullanır.

Kaynaklar

• İki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Uygulama, Hola ve tüm verileri uydurma. Sayılar iki ekranda da tutarlı: 41 günlük seri, 320 elmas, 4 kalp ve 12 dersin 4.'sü olan İçecek Sipariş Etme, 12 XP.
• İncelenen örüntü: Duolingo'nun öğrenme yolu ve Babbel.
• Simgeler Phosphor'dan (MIT). Yazı logosu Baloo 2 ExtraBold. Fotoğraf yok.
• İlk olarak App Brainy üzerinde bir carousel olarak yayımlandı.