Görsel Hata Raporlamanın Eksiksiz Rehberi

Her geliştirici o hata bildirimini almıştır. "Sayfa tuhaf görünüyor." "Bir hata var." "Çalışmıyor." Ardından üç dakikalık bir gidip gelme başlar: "Hangi sayfa? Hangi hata? Neye tıkladın?" Hatayı düzeltmek iki dakika sürebilir, ama onu anlamak on dakika alır.

Tek bir işaretlenmiş ekran görüntüsü bu sürtünmenin neredeyse tamamını ortadan kaldırır. Sorun görünür. Konum bellidir. Adımlar numaralandırılmıştır. Geliştirici sorunu açar, tam olarak neyin yanlış olduğunu görür ve hemen düzeltmeye başlar.

Bu rehber, görsel hata bildirimi hakkında bilmeniz gereken her şeyi kapsar: neden işe yaradığı, nasıl iyi yapılacağı, en çok zaman kazandıran işaretleme teknikleri ve hangi araçların kullanılacağı.

Hata Bildirimlerinde Ekran Görüntüleri Metni Neden Geçer

Metin tabanlı hata bildirimleri üç temel sorundan muzdariptir:

Belirsizlik. "Ayarlar sayfasındaki düğme çalışmıyor" ifadesi 15 düğmeden herhangi biri anlamına gelebilir. "Bildirim tercihleri panelindeki gönder düğmesi" bunu daraltır, ama yine de geliştiricinin oraya gitmesini, düğmeyi bulmasını ve yeniden üretmeye çalışmasını gerektirir. Düğmeyi gösteren bir oklu ekran görüntüsü belirsizliği anında giderir.

Eksik bağlam. Hata bildirenler, ilgili olduğunu düşündükleri şeyi anlatır; bu da çoğu zaman geliştiricinin ihtiyaç duyduğu şey değildir. Bir ekran görüntüsü, görüntüdeki her şeyi yakalar — hata mesajları, URL, tarayıcı durumu, çevredeki arayüz öğeleri — bildiren kişi bunlardan bahsetmeyi düşünmüş olsun ya da olmasın. Birçok hata, bildiren kişinin hiç bahsetmediği, ekran görüntüsünde görünen bir şeyden teşhis edilir.

Yeniden üretme zorluğu. "Tıkladım ve bir hata aldım" ifadesi, geliştiricinin sorunu yeniden üretmesine yardımcı olmaz. Her adımı gösteren numaralı ekran görüntüleri dizisi — "1. Ayarları açtım, 2. Dışa aktar'a tıkladım, 3. Bu hata iletişim kutusunu aldım" — belirsiz bir bildirimi yeniden üretilebilir bir test senaryosuna dönüştürür.

Microsoft ve Zürih Üniversitesi'nin araştırması, görsel ek içeren hata bildirimlerinin yalnızca metinli bildirimlere göre %13-18 daha hızlı çözüldüğünü buldu. Haftada yüzlerce hata bildirimi olan büyük kuruluşlarda, bu zaman tasarrufu muazzamdır.

Etkili Bir Hata Bildirimi Ekran Görüntüsünün Anatomisi

Tüm ekran görüntüleri eşit yaratılmamıştır. Ham, işaretlenmemiş bir ekran görüntüsü hiç yoktan iyidir, ama işaretlenmiş bir ekran görüntüsü ham olandan daha iyidir. İyi görsel hata bildirimlerini harika olanlardan ayıran şey şudur:

1. Doğru Alanı Yakalayın

Tam ekran yakalama değil, bölge yakalama kullanın. Amaç, sorunu bulmaya yetecek kadar bağlam göstermek, ama izleyicinin onu araması gerekecek kadar çok değil. Bir arayüz hatası için, bileşeni ve hemen çevresini yakalayın. Bir hata iletişim kutusu için, onu neyin tetiklediğini gösterecek kadar arka planla birlikte iletişim kutusunu yakalayın.

2. Soruna İşaret Edin

Sorunun tam olarak nerede olduğunu belirtmek için bir ok veya daire kullanın. Hata size bariz görünse bile, geliştiricinin açık on başka sorunu olabileceğini unutmayın. Bir ok, neyi bildirdiğinize dair her türlü belirsizliği ortadan kaldırır.

3. Metin İşaretlemeleriyle Bağlam Ekleyin

Kısa bir metin etiketi, birçok karışıklığı önleyebilir. Yanlış bir rengin yanına "Beklenen: mavi. Gerçek: yeşil". Bir yazım hatasının yanına "Bu 'Expprt' değil, 'Export' demeli". Yavaş bir bileşenin üzerine "Bu 8 saniye sonra yükleniyor". Etiketleri kısa tutun — en fazla bir cümle.

4. Adımlarınızı Numaralandırın

Yeniden üretmek için bir dizi eylem gerektiren hatalar için, numaralı işaretlemeler paha biçilemezdir. "1. Adım: Ayarlar'a tıklayın. 2. Adım: Karanlık modu açın. 3. Adım: En alta kaydırın. 4. Adım: Bu öğe kayboluyor." Ekran görüntüsündeki her numara bir eyleme karşılık gelir ve görsel bir yeniden üretme kılavuzu oluşturur.

5. Hassas Bilgileri Gizleyin

Bir ekran görüntüsünü herhangi bir hata takip aracına eklemeden önce, görünür hassas verileri kontrol edin: e-posta adresleri, API anahtarları, token'lar, kişisel kullanıcı verileri, dâhili URL'ler veya veritabanı içeriği. Bir hata bildiriminde olmaması gereken her şeyi gizlemek için bir bulanıklaştırma veya pikselleştirme aracı kullanın. Bu, özellikle herkese açık GitHub sorunlarına düşebilecek ekran görüntüleri için kritiktir. Ekran görüntüsü güvenliği rehberimiz bunu ayrıntılı olarak ele alır.

Hata Türüne Göre İşaretleme Teknikleri

Düzen ve CSS Hataları

Hizasız öğelerin etrafına dikdörtgenler çizin. Beklenen hizalamayı göstermek için çizgiler kullanın. Belirli değerlerle metin etiketleri ekleyin: "Beklenen 16px boşluk, gerçek 0px." DevTools'u açıp hesaplanmış stilleri yakalayabiliyorsanız, bunu ikinci bir ekran görüntüsü olarak ekleyin.

İşlevsel Hatalar

Yeniden üretme adımlarını numaralandırın. Bozuk eylemden önceki ve sonraki durumu yakalayın. Bir hata mesajı varsa, tamamen görünür olduğundan ve bir dikdörtgenle vurgulandığından emin olun. Orada hata görebiliyorsanız tarayıcı konsolunu ekleyin — geliştiriciler JavaScript hatalarını, ağ arızalarını ve CORS sorunlarını arayacaktır.

İçerik ve Metin Hataları

Yanlış metni daire içine alın. Beklenen içerikle bir metin işaretlemesi ekleyin. Yazım hataları için, belirli kelimeyi gösteren bir ok yeterlidir. Eksik içerik için, içeriğin görünmesi gereken yere bir dikdörtgen çizin ve "Eksik: [açıklama]" olarak etiketleyin.

Performans Hataları

Performans hatalarını görsel olarak yakalamak zordur. En iyi seçeneğiniz, yavaş istekleri gösteren tarayıcının Ağ sekmesinin veya uzun görevleri gösteren Performans sekmesinin ekran görüntüsünü almaktır. Zaman damgalarıyla işaretleyin: "Bu istek 8,2 saniye sürüyor." Takılan animasyonlar için, bir ekran kaydı bir ekran görüntüsünden daha kullanışlıdır.

Tarayıcılar Arası Hatalar

İki ekran görüntüsü alın: biri çalıştığı tarayıcıdan, biri de bozuk olduğu tarayıcıdan. Bunları yan yana koyun veya etiketlerle dikey olarak üst üste dizin: "Chrome 120 (doğru)" ve "Firefox 121 (bozuk)." Görsel fark, sorunu anında belirgin kılar.

Ekipler için En İyi Uygulamalar

Ekran görüntüsü aracınızı standartlaştırın. Ekipteki herkes aynı aracı kullandığında, ekran görüntüleri tutarlı görünür ve herkes hangi işaretleme özelliklerinin mevcut olduğunu bilir. Maxisnap ekipler için iyi bir tercihtir çünkü işaretleme araçları tüm yaygın kullanım senaryolarını (oklar, numaralar, metin, bulanıklaştırma) kapsar ve kimsenin kaynak kullanımından şikâyet etmeyeceği kadar hafiftir.

İşaretleme kuralları belirleyin. "İşte hata bu" için kırmızı oklar. "Beklenen davranış" için yeşil oklar. "İlgili bağlam" için mavi dikdörtgenler. Yeniden üretme adımları için numaralı daireler. Bu kuralların resmi olarak belgelenmesi gerekmez — beş dakikalık bir ekip görüşmesi yeterlidir. Bir kez belirlendikten sonra, her hata bildirimi hem oluşturması hem de okuması daha hızlı hale gelir.

Ortam bilgilerini ekleyin. Ekran görüntülerinizde URL çubuğunu, tarayıcı sürümünü veya işletim sistemi göstergesini yakalamayı alışkanlık haline getirin. Bu bağlam çoğu zaman bölge yakalamalarının dışında kalır, ancak bir hatayı yeniden üretmek ile bunu denemek için bir saat harcamak arasındaki fark olabilir. Alternatif olarak, ortam ayrıntılarını ekran görüntüsünün yanında hata bildiriminin metnine ekleyin.

Dosya ekleri değil, yükleme bağlantıları kullanın. Bir Jira yorumundaki ekran görüntüsü bağlantısı anında yüklenir. 5 MB'lık bir PNG eki, bir tıklama ve bir indirme gerektirir. Maxisnap gibi otomatik yükleme özellikli araçlar, paylaşılabilir bağlantıları otomatik olarak oluşturur; bu da bir ekran görüntüsü URL'sini herhangi bir hata takip aracına, Slack kanalına veya e-postaya yapıştırmayı çok kolaylaştırır. SFTP yüklemesini kurmak beş dakika sürer ve her yakalama için size kalıcı bir bağlantı verir.

Araç Önerileri

En iyi görsel hata bildirimi aracının üç özelliği vardır: kısayol tuşuyla hızlı yakalama, anında işaretleme (ayrı bir düzenleyiciye geçmeden) ve hızlı paylaşım (yükleme veya pano).

• Maxisnap — Anında işaretleme ve sunucu yüklemesiyle hafif, klavye odaklı yakalamaya ihtiyaç duyan ekipler için en iyisi. Numaralı adımlar ve bulanıklaştırma dâhil 11 işaretleme aracı. Kişisel kullanım için ücretsizbakın.
• Snagit — Birinci sınıf işaretleme özellikleri isteyen ve yılda 39 $ ödemeye istekli kuruluşlar için en iyisi. Adım numaralandırma ve smart-move araçları dokümantasyon için mükemmeldir.
• ShareX — Maksimum yapılandırılabilirlik isteyen ve karmaşıklığa aldırmayan geliştiriciler için en iyisi. Ücretsiz ve açık kaynaklı.
• Loom — Ekran görüntülerinin yetmediği ve hızlı bir video anlatımına ihtiyaç duyduğunuz durumlar için en iyisi. Ekran kaydı ve anlatım birleşimi, karmaşık hatalar için güçlüdür. (Monosnap'ten geliyorsanız, Maxisnap vs Monosnap karşılaştırmamızabakın.)

İyi Hata Ekran Görüntülerinin Getirisi

Görsel hata bildirimi yalnızca güzel bir uygulama değildir — geliştirme hızı üzerinde ölçülebilir bir etkisi vardır. Hesabı bir düşünün:

• Yalnızca metinden oluşan bir hata bildirimi, işe başlanmadan önce ortalama 2-3 açıklama alışverişi gerektirir: ~15 dakikalık birikmiş bekleme süresi
• İşaretlenmiş bir ekran görüntüsü bu alışverişleri ortadan kaldırır: hata başına ~15 dakika tasarruf
• Haftada 50 hata bildiren bir ekip, haftalık ~12,5 saatlik açıklama süresi tasarruf eder
• Bir yıl boyunca, bu 600 saatten fazla geliştirici zamanının geri kazanılması demektir

Ve bu hesap yalnızca açıklamaya harcanan zamanı dikkate alır. Odak kesintisi maliyetini içermez — her açıklama alışverişi, hem bildiren kişinin hem de geliştiricinin bağlam değiştirmesini gerektirir ve her biri fazladan 10-15 dakikalık verimli zamana mal olur.

Başlarken

Hata bildirimlerinizde henüz işaretlenmiş ekran görüntüleri kullanmıyorsanız, bugün başlayın. İşaretleme desteği olan bir ekran görüntüsü aracı indirin, beş dakikanızı ayırıp klavye kısayollarını öğrenin ve bir paragraf açıklama yazmak yerine bir sonraki hata bildiriminizi işaretlemeyi deneyin.

Bir geliştiricinin "Hangi düğmeyi kastettiğini açıklayabilir misin?" yerine ilk kez "Düzeltildi, teşekkürler — harika ekran görüntüsü" diye yanıt verdiğinde, bir daha asla yalnızca metinden oluşan hata bildirimlerine dönmezsiniz.

Mühendisliğin ötesinde — görsel hata bildirimi, pazarlama ekipleri için açılış sayfası gerilemelerini takip ederken de aynı derecede kullanışlıdır ve proje yönetimi hata bildirimi akışı sayfası, işaretlenmiş yakalamaları bağlam kaybetmeden Jira / Linear / Notion'a nasıl aktaracağınızı gösterir.