Kullanılabilirliği ve Düzen Netliğini Artırmak İçin Bilişsel ve Görsel Tasarım İlkelerini Entegre Eden Otomatik Kullanıcı Arayüzü Prototipleme Çerçevesi

Jun Shi; Di Chen

doi:10.3791/71071

Araştırma makalesi

Kullanılabilirliği ve Düzen Netliğini Artırmak İçin Bilişsel ve Görsel Tasarım İlkelerini Entegre Eden Otomatik Kullanıcı Arayüzü Prototipleme Çerçevesi

DOI:

10.3791/71071

⸱

14 Ağustos 2026

Jun Shi¹ , Di Chen²

¹School of Art and Communication, Shanghai Institute of Commerce and Foreign Languages, ²Hubei College of the Arts

Bu makalede

Özet

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Bu çalışma, bilişsel tasarım ilkelerini, algısal renk modellemesini ve derin öğrenmeyi entegre eden otomatik bir kullanıcı arayüzü prototipleme çerçevesi sunmaktadır. Sistem; erişilebilirliği, düzen netliğini, renk uyumunu ve ekranlar arası tutarlılığı artırarak tutarlı ve kullanıcı merkezli arayüz tasarımları sağlar.

Özet

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Etkili kullanıcı arayüzü (UI) tasarımı; görsel çekicilik, bilişsel kullanılabilirlik ve düzen tutarlılığı arasında harmonik bir denge gerektirir. Ancak, mevcut otomatik UI üretim yaklaşımları öncelikle görsel görünüme veya bileşen tespitine odaklanmakta olup bilişsel ilkeleri, renk zekasını ve yapısal akıl yürütmeyi entegre eden birleşik bir çerçeveden yoksundur. Ayrıca, mevcut yöntemler kısıtlı düzen genellemesi, düşük yorumlanabilirlik, statik renk seçimi ve ekranlar arası tutarsız davranışlardan muzdariptir. Bu bağlamda, bu çalışma; bilişsel ve görsel tasarım ilkeleriyle zenginleştirilmiş, Faster bölge tabanlı evrişimli sinir ağı (Faster R-CNN) tabanlı bileşen tespiti ve CIECAM02 tekbiçimli renk uzayı (CAM02-UCS) güdümlü algısal renk modellemesini entegre eden otomatik bir UI prototipleme çerçevesi önermektedir. Faster R-CNN, büyük ölçekli arayüz veri setlerinden UI bileşenlerini tanımlamak ve hiyerarşik yapıları anlamak için kullanılır. Geliştirilmiş bir renk üretim modülü, CAM02-UCS kullanarak algısal olarak tekbiçimli, uyumlu ve kullanılabilirlik standartlarına uygun renk temaları sağlamak amacıyla marka veya referans görsellerini analiz eder. Bu çıktılar; rafine, görev odaklı UI düzenlerini otomatik olarak oluşturmak için Gestalt gruplandırması, Fitts ve Hick yasaları, dikkat tabanlı boşluklandırma ve görsel hiyerarşi modellemesi dahil olmak üzere bilişsel tasarım kurallarıyla daha da optimize edilir. RICO, ENRICO ve Guo'nun UI Renk Veri Setleri üzerinde yürütülen deneyler, önerilen sistemin %92,4 bileşen tespit doğruluğuna ulaştığını, düzen netliğini ve okuma sırası doğruluğunu %18,7 oranında artırdığını ve temel yöntemlere kıyasla tasarımcılar tarafından %24,5 daha uyumlu olarak değerlendirilen renk paletleri ürettiğini göstermektedir. Kullanıcı değerlendirmeleri ayrıca, algılanan bilişsel yükte %31 azalma ve ekranlar arası tasarım tutarlılığında %28 artış olduğunu belirtmektedir. Bu bulgular, derin öğrenme tabanlı yapısal anlayışın, algısal temelli renk modellemesi ve bilişsel tasarım ilkeleriyle birleştirilmesinin; son derece verimli, estetik olarak tutarlı ve kullanıcı dostu UI prototipleri ürettiğini kanıtlamaktadır. Bu çerçeve, akıllı ve insan odaklı otomatik UI prototipleme için özgün, uçtan uca bir yaklaşım sunmaktadır.

Giriş

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Grafik kullanıcı arayüzleri (GUI'ler), insanlar ve bilgisayar sistemleri arasında temel bir iletişim ortamı görevi görerek kullanılabilirliği, erişilebilirliği ve genel kullanıcı deneyimini (UX) önemli ölçüde etkiler¹^,². Modern yazılım sistemleri, kullanıcıları çekmek ve elde tutmak için sezgisel ve görsel olarak çekici arayüzlere güvenir. Geleneksel olarak UI tasarımı, daha sonra mühendisler tarafından ön uç koduna dönüştürülen grafik düzenlerin oluşturulmasını içerir. Ancak, işletim sistemleri arasındaki platforma özgü protokol farklılıkları tekrarlanan adaptasyonlar gerektirerek geliştirme karmaşıklığını ve çabasını artırmaktadır. Bu nedenle, manuel çabayı azaltan ve geliştirme verimliliğini artıran otomatik UI kod üretimi, önemli bir araştırma yönü olarak ortaya çıkmıştır.

Otomatik kullanıcı arayüzü (UI) oluşturmaya yönelik erken yaklaşımlar, bölge tespiti ve sınıflandırma için geleneksel görüntü işleme tekniklerini derin öğrenme modelleriyle birleştirmiştir³^,⁴. Günümüzde, grafik kullanıcı arayüzü (GUI) kod üretimi için kullanılan baskın stratejiler, UI görüntülerini analiz etmek ve bunları yapılandırılmış ön uç gösterimlerine dönüştürmek için bilgisayarlı görü tekniklerini uygulamaktadır⁵^,⁶^,⁷. Görüntü işleme yöntemleri manuel olarak belirlenmiş özelliklere dayanırken, derin öğrenme yaklaşımları geniş ölçekli veri kümelerinden hiyerarşik temsillemeler çıkarmaktadır. Bunun sonucunda araştırmacılar, dayanıklılığı ve doğruluğu artırmak amacıyla derin öğrenmeyi alana özgü görüntü işleme teknikleriyle birleştiren hibrit yaklaşımlar üzerinde çalışmışlardır.

Renk, kullanıcı algısını, kullanılabilirliği ve estetik çekiciliği etkileyen, kullanıcı arayüzü (UI) tasarımındaki bir diğer kritik faktördür¹. Görsel girdilerin ton ve bağlam açısından farklılık gösterdiği durumlarda, görüntü içeriği ile UI renk şemaları arasında tutarlılığı sağlamak zorlaşmaktadır⁸^,⁹^,¹⁰. Sonuç olarak, önemli miktarda araştırma otomatik renk paleti oluşturma ve algısal renk modelleme üzerine yoğunlaşmıştır. Renk oluşturma için mevcut yöntemler arasında CIELAB renk uzayına dayalı teknikler yer almaktadır¹¹. Diğer yaklaşımlar ise görüntülerden baskın renkleri çıkarmak için k-means gibi kümeleme algoritmalarını kullanmaktadır¹². Bunun sonucunda, yakın dönemdeki çalışmalar renk modellemesi için giderek daha fazla veri odaklı ve makine öğrenimi tabanlı yaklaşımlar benimsemiştir.

Paralel olarak, derin öğrenme yaklaşımları kullanıcı arayüzü (UI) bileşen tespitini ve yerleşim anlayışını önemli ölçüde geliştirmiştir. Sinir ağları, mobil arayüzlerin daha doğru yapısal ayrıştırılmasını sağlamıştır¹³. Ancak bu yöntemler temel olarak tespit doğruluğuna odaklanmakta ve genellikle bilişsel kullanılabilirlik, yerleşim hiyerarşisi ve etkileşim verimliliği gibi üst düzey yönleri göz ardı etmektedir. UI yerleşim sentezi için üretken modeller de önerilmiştir¹⁴^,¹⁵, fakat bu modeller ekranlar arası tutarlılığın korunması ve yorumlanabilir tasarım kararlarının sunulması konusunda zorluklar yaşamaktadır¹⁶. Diğer yaklaşımlar görsel benzerliğe veya oluşturma kalitesine odaklanmaktadır ancak bileşen semantiğini, renk uyumunu ve kullanılabilirlik kısıtlamalarını birleştiren birleşik bir çerçeveden yoksundur¹⁷. Metin tanıma da UI içeriğinin anlaşılması için önemlidir. Evrişimli tekrarlayan sinir ağları (CRNN'ler) gibi teknikler, arayüz ekranlarındaki karmaşık metin kalıplarının doğru şekilde tanınmasını sağlar¹⁸^,¹⁹^,²⁰.

Taslaklardan veya görsellerden UI kodu üretmek için çeşitli sistemler önerilmiştir. Sketch2Code, taslakları kod temsillerine dönüştürmek için nesne tespiti kullanır²¹^,²², ancak görüntü kalitesine karşı hassastır. REDRAW, yapılandırılmış UI temsilleri oluşturmak için evrişimli ve tekrarlayan sinir ağlarını birleştirerek veri toplama ve model eğitimi için otomatik bir iş akışı sağlar²³^,²⁴. Sonraki çalışmalar, üretilen UI kalitesini değerlendirmek için geliştirilmiş değerlendirme metrikleri sunmuştur²⁵. Daha güncel yaklaşımlar arasında yerleşim oluşturma için difüzyon tabanlı ve transformer tabanlı modeller yer almaktadır; örneğin, oto-kodlayıcı yöntemleri içermeyen difüzyon yerleşim transformer'ları, transformer tabanlı GUI düzenleme grafikleri kullanarak GUI yerleşim oluşturma ve büyük dil modeli rehberliğinde UI yerleşim oluşturma gibi yöntemler bulunmaktadır²⁶^,²⁷^,²⁸. Bu yaklaşımların karşılaştırmalı bir genel görünümü Tablo 1'de sunulmuştur.

Referanslar ve Temel Yöntem(ler)	Amaç	Avantajlar	Dezavantajlar
Otomatik Görüntü Tabanlı Kullanıcı Arayüzü Renk Teması Oluşturma: baskın renk çıkarımı + CAM02-UCS algısal renk modellemesi¹	Referans görüntülerden, uyum ve kullanılabilirliği optimize ederek otomatik olarak kullanıcı arayüzü (UI) renk temaları oluşturun.	Güçlü algısal temel (CAM02-UCS); uyum ve kullanılabilirliği (kontrast ve çeşitlilik) açıkça dengeler; web tabanlı uygulamayı ve tasarımcı değerlendirmesini içerir.	Sadece renk/temaya odaklanmış (düzen veya bileşen yapısına değil); uçtan uca öğrenilmiş kullanıcı arayüzü sentezi yerine kural/sezgisel tabanlı.
Ayrıştırılmış Bir Difüzyon Modeli ile Düzen Oluşturmanın Birleştirilmesi (LDGM)²⁵	Grafik sahneleri ve kullanıcı arayüzleri için birleştirilmiş, esnek düzen oluşturma.	Yerleşim oluşturma için son teknoloji çeşitlilik ve kontrol edilebilirlik; koşullu oluşturmayı ve birden fazla öznitelik türünü destekler.	Kısıtlanmadığı takdirde, difüzyon tabanlı çıktılar hizalama veya ince ayarlı düzen sorunları sergileyebilir; daha yüksek model karmaşıklığı ve çıkarım maliyeti söz konusudur.
Otokodlayıcı Yöntemleri Olmayan Difüzyon Düzen Transformers'ları: düzen oluşturma için transformer + difüzyon (otokodlayıcı yok)²⁶	Yerleşim oluşturma kıyaslamaları (FID, hizalama ve örtüşme metrikleri) için sadakat ve hizalamayı iyileştirin.	Komşu nesneler arasındaki semantik korelasyonların daha iyi yakalanması; FID ve hizalama metriklerinde güçlü performans.	Kullanıcı arayüzü (UI) semantiğinden ziyade, öncelikle yerleşim geometrisine (konumlar, boyutlar, kategoriler) odaklanır.
GUI Düzenleme Grafikleri (GUI-AG'ler)²⁷ kullanılarak Transformer tabanlı modeller ile GUI Yerleşim Üretimi	Tasarımcılara yardımcı olmak amacıyla, konumsal/grafik kısıtlamalarından GUI düzenleri oluşturun.	Graf temsilleri ilişkisel kısıtlamaları yakalar; transformer ise esnek, kısıtlamaya bağlı üretimi mümkün kılar.	Tasarımcılardan açık kısıtlama grafikleri gerektirebilir; renk ve kullanılabilirlik metrikleri üzerinde sınırlı vurgu vardır.
UI Grameri ile Yönlendirilen LLM'ler ile UI Düzen Oluşturma: Büyük Dil Modelleri (LLM'ler) + hiyerarşik UI grameri²⁸	Yerleşim oluşturma için LLM'leri keşfedin ve gramer temsilleri aracılığıyla açıklanabilirlik/kontrolü geliştirin.	Yüksek düzeyde kontrol edilebilirlik ve açıklanabilirlik; LLM'lerin (GPT tipi) bağlam içi öğrenme (in-context learning) yeteneğinden yararlanabilir.	Sınırlı ampirik doğrulama içeren erken aşama çalışma; gramer tasarımı ve farklı kullanıcı arayüzleri genelindeki sağlamlık

Tablo 1: Mevcut kullanıcı arayüzü (UI) renk modelleme ve yerleşim oluşturma yöntemlerinin karşılaştırılması. Tablo; renk teması oluşturma, difüzyon tabanlı yerleşim oluşturma, transformer tabanlı yöntemler ve büyük dil modeli rehberliğinde yerleşim oluşturma dahil olmak üzere kullanıcı arayüzü tasarımı için temsili yaklaşımları özetlemektedir. Her yöntem için temel teknik, amaç, avantajlar ve kısıtlamalar sunulmuş; algısal modelleme, yerleşim oluşturma yeteneği, kontrol edilebilirlik ve kullanılabilirlik hususlarındaki farklar vurgulanmıştır.

Bu ilerlemelere rağmen, temel bir sınırlama devam etmektedir: mevcut hiçbir sistem; bileşen algılamayı, algısal renk modellemeyi, bilişsel tasarım ilkelerini ve çoklu ekran düzen tutarlılığını tek bir uçtan uca çerçeve içerisinde ortaklaşa entegre etmemektedir¹. Mevcut yaklaşımlar genellikle, aralarındaki karşılıklı bağımlılıkları göz önünde bulundurmadan sadece algılama, düzen veya renk gibi bir veya iki yönü optimize etmektedir. Bu parçalı yapı, birleşik ve insan merkezli otomatik kullanıcı arayüzü (UI) prototipleme sistemlerinin geliştirilmesinde kritik bir araştırma boşluğunun olduğunu vurgulamaktadır. Özellikle, Gestalt yasaları, Fitts yasası ve Hick yasası gibi bilişsel tasarım ilkeleri, hesaplamalı modellere biçimsel olarak entegre edilmek yerine genellikle kavramsal olarak ele alınmaktadır.

Bu sınırlamaları gidermek için, bu çalışma; bileşen tespiti, algısal renk modellemesi ve bilişsel tasarım ilkelerini tek bir sistemde entegre eden uçtan uca otomatik bir kullanıcı arayüzü (UI) prototipleme çerçevesi önermektedir. Çerçeve; düzen kalitesini artırmak, bilişsel yükü azaltmak, renk uyumunu geliştirmek ve genel kullanışlılığı yükseltmek için tasarlanmıştır. Bu iyileştirmeler; RICO, ENRICO ve Guo'nun UI Renk Veri Setleri üzerinde yapılan deneylerle doğrulanmış olup yapısal, algısal ve bilişsel yönlerin tek bir otomatik UI prototipleme hattında birleştirilmesinin etkinliğini kanıtlamaktadır. Derin öğrenme tabanlı bileşen tespiti, algısal renk modellemesi ve bilişsel tasarım ilkelerinin birleşik bir çerçeve içinde entegre edilmesinin, mevcut yaklaşımlara kıyasla UI prototip kalitesini önemli ölçüde artıracağı hipotezi kurulmuştur. Spesifik olarak H1, çerçevenin hizalama, gruplandırma ve okuma sırası dahil olmak üzere düzen kalitesini artırdığını öne sürmektedir. H2, çerçevenin kullanıcı bilişsel yükünü azalttığını ileri sürmektedir. H3, algısal renk modellemesinin renk koordinasyonunu ve görsel uyumu iyileştirdiğini savunmaktadır. H4 ise UI prototiplerinin genel kullanışlılığının ve estetik kalitesinin iyileştiğini belirtmektedir.

Protokol

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Bu çalışma, halka açık veri setlerini kullanmaktadır ve insan veya hayvan denekleri içermemektedir.

Önerilen otomatik kullanıcı arayüzü (UI) prototipleme çerçevesi, tutarlı ve kullanıcı merkezli arayüz prototipleri oluşturmak için derin öğrenme tabanlı yapısal anlama, algısal olarak tekdüze renk modelleme ve bilişsel tasarım ilkelerini entegre eder. Metodoloji, çeşitli ekran düzenlerinin doğru yorumlanmasını sağlamak amacıyla, UI bileşenlerini tespit etmek ve bunların hiyerarşik ilişkilerini çıkarmak için RICO ve ENRICO veri setleri üzerinde eğitilmiş bir Faster R-CNN mimarisi ile başlar. Tespit edilen bileşenler daha sonra, marka veya görüntü tabanlı renk ipuçlarını çıkaran, CAM02-UCS kullanarak algısal benzerliği modelleyen ve armonik, kontrast duyarlı ve erişilebilirlik uyumlu renk paletleri oluşturan bir renk zeka modülü tarafından işlenir. Ardından; Gestalt gruplandırma yasaları, Fitts yasası, Hick yasası, dikkat tabanlı boşluklandırma ve görsel hiyerarşi kısıtlamaları dahil olmak üzere bilişsel tasarım ilkeleri, mekansal organizasyonu ve bileşen hizalamasını iyileştirmek için bir bilişsel optimizasyon motoru aracılığıyla uygulanır. Son olarak, bir düzen akıl yürütme katmanı; kullanılabilirlik, estetik ve işlevsel netlik arasında denge kuran çok ekranlı tutarlı UI prototipleri oluşturmak için yapısal, algısal ve bilişsel kısıtlamaları entegre eder. Bu entegre iş akışı, algısal tutarlılığı sağlar, bilişsel yükü azaltır ve insan merkezli tasarım ilkelerine bağlı kalır. Önerilen yöntemin tüm iş akışı Şekil 1'de gösterilmiştir.

figure-protocol-1
Şekil 1. Önerilen otomatik kullanıcı arayüzü prototipleme çerçevesinin genel mimarisi. Diyagram, bir giriş kullanıcı arayüzü (UI) görüntüsüyle başlayan tüm süreci göstermektedir. Arayüz öğelerini belirlemek için Faster R-CNN kullanılarak bileşen tespiti gerçekleştirilir. Tespit edilen bileşenler daha sonra hiyerarşi ve yerleşim çıkarımı için CAM02-UCS tabanlı algısal modelleme kullanılarak işlenir. Ardından Gestalt ilkeleri, Fitts yasası, Hick yasası ve dikkat tabanlı ayarlamalar kullanılarak bilişsel optimizasyon uygulanır. Oklar, modüller arasındaki veri akışını göstermekte ve sonuçta nihai kullanıcı arayüzü prototip çıktısı elde edilmektedir. Bu şeklin daha büyük bir versiyonunu görüntülemek için lütfen buraya tıklayın.

Çerçevenin genel görünümü

Şekil 1, ham bir kullanıcı arayüzü (UI) ekran görüntüsünü bilişsel olarak geliştirilmiş bir prototipe dönüştüren önerilen otomatik UI prototipleme çerçevesinin uçtan uca iş akışını göstermektedir. Süreç, Faster R-CNN tabanlı bileşen algılama modülüne aktarılan girdi UI görüntüsü ile başlar. Bu modül; butonlar, simgeler, metin alanları ve kapsayıcılar gibi arayüz öğelerini tanımlayarak bunlara karşılık gelen sınırlayıcı kutuları ve sınıf etiketlerini çıktı olarak verir. Algılanan bileşenler daha sonra hiyerarşi ve düzen çıkarma aşamasında işlenir. Sistem, mekansal ilişkilere ve yapısal kalıplara dayanarak, kullanıcıların ekran organizasyonunu doğal olarak nasıl algıladığını yansıtan hiyerarşik bir düzen ağacı oluşturur. Bu temsil, UI öğeleri arasındaki görsel gruplandırmayı ve yapısal bağımlılıkları yakalar. Çıkarılan düzen, ardından insan merkezli tasarım ilkeleri uygulanarak bilişsel optimizasyon aracılığıyla geliştirilir. Bunlar arasında; görsel kümeleme için Gestalt gruplandırması, dokunma hedefi boyutu ve erişilebilirliğini optimize etmek için Fitts yasası, karar verme karmaşıklığını azaltmak için Hick yasası ve görsel hiyerarşiyi iyileştirmek için dikkat tabanlı boşluklandırma yer almaktadır. Sonuç olarak düzen, kullanıcı etkileşimi için daha sezgisel, okunabilir ve verimli hale gelir. Son olarak, optimize edilmiş düzen, tutarlı bir UI prototipi oluşturmak için algısal renk modellemesi ile birleştirilir. Ortaya çıkan arayüz yapısal olarak doğru, görsel olarak uyumlu ve insan kullanılabilirlik beklentileriyle örtüşür durumdadır.

Çerçeve, Ubuntu 22.04 üzerinde PyTorch 2.0 kullanılarak uygulandı. Deneyler, NVIDIA RTX 4090 GPU (24 GB VRAM) ile donatılmış bir sistemde gerçekleştirildi. Faster R-CNN modeli, ImageNet veri kümesi üzerinde önceden eğitilmiş bir ResNet-50 omurgası kullandı. Eğitim, 0.001 öğrenme hızı, 16 grup boyutu (batch size) ve 60 epoka kadar stokastik gradyan inişi (SGD) optimize edici kullanılarak gerçekleştirildi. Aşırı öğrenmeyi (overfitting) önlemek için verilerin %20'sini içeren bir doğrulama seti kullanılarak erken durdurma uygulandı. Eğitim 60 epoka kadar gerçekleştirilmiş olsa da, doğrulama kaybına dayalı erken durdurma sayesinde yakınsama genellikle daha erken aşamalarda sağlandı. Momentum ve ağırlık azalması (weight decay) değerleri sırasıyla 0.9 ve 0.0005 olarak ayarlandı. Veri artırma işlemleri; normalizasyon, rastgele yatay çevirme, rastgele kırpma ve yeniden boyutlandırmayı içeriyordu.

Veri seti hazırlığı

Önerilen otomatik kullanıcı arayüzü (UI) prototipleme çerçevesini desteklemek için üç tamamlayıcı veri seti kullanılmıştır: ENRICO²⁹, RICO³⁰ ve Guo’nun UI Renk Veri Seti¹. RICO veri seti, 9.700 uygulamadan toplanan 66.261 Android UI ekranını içermekte olup, bileşen tespiti ve hiyerarşik düzen çıkarma işlemleri için geniş ölçekli bir çeşitlilik sağlamaktadır. ENRICO, yapısal akıl yürütme ve düzen tutarlılığı modellemesi için genelleştirme yeteneğini artıran, manuel olarak 20 tasarım desenine ayrılmış 1.464 yüksek kaliteli UI ekran görüntüsünü içermektedir. Guo’nun UI Renk Veri Seti, algısal renk modelleme ve palet değerlendirmesi için kullanılan, açıklanmış renk temalarına sahip 128 küratörlü UI görüntüsünden oluşmaktadır. Ancak, nispeten küçük boyutundan dolayı bu veri seti, düzen özelliklerinde bazı değişkenliklere yol açabilir. Bu çalışma için eğitim ve değerlendirme amacıyla 5.128 ekrandan oluşan birleştirilmiş bir veri seti hazırlanmıştır. Özellikle, RICO'dan yaklaşık 4.000 görüntü bileşen tespiti için Faster R-CNN modelini eğitmekte, ENRICO'dan 1.000 görüntü düzen deseni öğrenimi ve yapısal tutarlılık modellemesinde ve Guo’nun veri setinden 128 görüntü ise renk değerlendirme görevlerinde kullanılmıştır. Veri setleri arasındaki uyumluluğu sağlamak amacıyla tüm görüntüler 480 × 800 piksel çözünürlüğe normalize edilmiş, tek tip sRGB renk uzayına dönüştürülmüş ve standartlaştırılmış sınırlayıcı kutular ile hiyerarşik meta verilerle yeniden etiketlenmiştir. Bu çalışmada kullanılan veri setlerine genel bir bakış Tablo 2'de sunulmuştur. RICO veri seti, UI bileşenlerinin geniş ölçekli tespitini ve yapısal analizini desteklerken; ENRICO, modelin düzen desenlerini tanıma ve ekranlar arası tutarlılığı sağlama yeteneğini geliştirmektedir. Guo’nun UI Renk Veri Seti, boyutu daha küçük olsa da algısal renk uyumu ve kontrast modellemesinin değerlendirilmesinde kritik bir rol oynamaktadır. Bu veri setleri birlikte, önerilen otomatik UI prototipleme çerçevesinin eğitimi, doğrulanması ve değerlendirilmesi için kapsamlı ve dengeli bir temel oluşturmaktadır.

Veri Seti	Mevcut Toplam Görüntü	Çalışmada Kullanılan Görüntüler	Önerilen Çerçevedeki Amacı
RICO Veri Seti³⁰	66,261	4,000	Kullanıcı arayüzü (UI) bileşeni tespiti, yapısal düzen çıkarımı
ENRICO Veri Seti²⁹	1,464	1,000	Tasarım kalıbı öğrenimi, düzen tutarlılığı modellemesi
Guo’nun UI Renk Veri Seti¹	128	128	Renk teması çıkarımı, algısal renk değerlendirmesi
Birleşik Toplam	67,853	5,128	Tespit, düzen ve renk modellemesi için kapsamlı veri seti

Tablo 2: Önerilen çerçevede kullanılan veri kümelerinin özeti. Tablo; RICO, ENRICO ve Guo'nun UI Renk Veri Kümeleri dahil olmak üzere eğitim ve değerlendirme için kullanılan veri kümelerini sunmaktadır. Mevcut toplam görüntü sayısını, bu çalışmada kullanılan alt kümeyi ve her bir veri kümesinin önerilen çerçeve içindeki bileşen tespiti, düzen modellemesi ve algısal renk analizindeki özel rolünü rapor etmektedir.

RICO, ENRICO ve Guo veri setleri genelinde kullanıcı arayüzü (UI) bileşenleri, düzen yapıları ve renk dağılımlarındaki çeşitliliği korumak için tabakalı örnekleme stratejisi uygulanmıştır. Veri seti, tabakalı örnekleme kullanılarak eğitim (%70), doğrulama (%15) ve test (%15) alt kümelerine ayrılmıştır. Görüntüler, ortalama (0.485, 0.456 ve 0.406) ve standart sapma (0.229, 0.224 ve 0.225) kullanılarak normalize edilmiştir. Veri artırma işlemleri, eğitim sırasında uygulanan rastgele yatay çevirme (olasılık = 0.5) ve rastgele kırpmayı (ölçek aralığı: 0.8–1.0), ardından 224 × 224 piksele yeniden boyutlandırmayı içermiştir.

Bileşen açıklama ve ön işleme

RICO, ENRICO ve Guo’nun UI Color Veri Kümesi; önerilen otomatik kullanıcı arayüzü (UI) prototipleme çerçevesinin üç temel fonksiyonel bileşeni olan bileşen algılama, yerleşim modelleme ve algısal renk optimizasyonunu ortaklaşa desteklemektedir. RICO veri kümesi, 66.000'den fazla mobil UI ekranından oluşan geniş ölçekli bir koleksiyon içerir ve öncelikli olarak bileşen algılama modülünün eğitimi için kullanılır. Bu veri kümesinin çeşitliliği, Faster R-CNN modelinin çok çeşitli uygulamalardaki butonlar, görseller ve metin alanları gibi yaygın UI öğelerinin sağlam temsillerini öğrenmesini sağlar. Bu durum, farklı tasarım koşulları altında UI bileşenlerinin doğru şekilde algılanmasını ve konumlandırılmasını garanti eder. ENRICO veri kümesi, yapısal ilişkilerin ve yerleşim kalıplarının öğrenilmesi için yüksek kaliteli, örüntü etiketli UI ekranları sağlar. Bu sayede sistem; bileşenler arası ilişkileri, hiyerarşik organizasyonu ve yaygın tasarım şablonlarını anlayabilir. Bu veri kümesi, yerleşim yapılarının modellenmesinde ve çoklu ekran tutarlılığının sağlanmasında kritik bir rol oynayarak, çerçevenin yerleşik tasarım kurallarıyla uyumlu yerleşimler oluşturmasına olanak tanır. Buna karşılık, Guo’nun UI Color Veri Kümesi, özellikle algısal ve bilişsel renk modelleme için kullanılır. Yapısal yönlere odaklanan RICO ve ENRICO'nun aksine, bu veri kümesi açıklama eklenmiş renk temalarına sahip küratörlü UI görselleri içerir. Bu açıklamalar, renk çıkarma ve uyum değerlendirme modüllerini eğitmek için kullanılır. Renk ilişkilerini CAM02-UCS gibi algısal renk uzaylarına eşleyen çerçeve; kontrast, erişilebilirlik ve estetik tutarlılığı dengeleyen renk paletleri oluşturmayı öğrenir. Bu veri kümeleri birlikte entegre bir işlem hattı oluşturur: RICO bileşen algılamayı destekler, ENRICO yerleşim kalıplarının anlaşılmasını ve yapısal tutarlılığı sağlar ve Guo’nun veri kümesi algısal renk optimizasyonunu kolaylaştırır. Bu entegrasyon, oluşturulan UI prototiplerinin yapısal olarak doğru, görsel olarak uyumlu ve bilişsel olarak optimize edilmiş olmasını sağlar.

Normalizasyon, [0.485, 0.456, 0.406] ortalaması ve [0.229, 0.224, 0.225] standart sapması kullanılarak gerçekleştirilmiştir. Model genellemesini artırmak için rastgele kırpma, yatay çevirme ve döndürme dahil olmak üzere veri artırma teknikleri uygulanmıştır. Ayrıca, veri kümeleri arasında tutarlılığı sağlamak amacıyla piksel değerleri [0, 1] aralığına ölçeklendirilmiş ve tüm görüntüler 480 × 800 piksel çözünürlüğe yeniden boyutlandırılmıştır. Eğitim sırasında artırma işlemi için 224 × 224 piksel boyutuna getirilen görüntüler kullanılırken, yerleşim analizi için orijinal 480 × 800 piksel çözünürlük korunmuştur. İlgisiz açıklamaları filtrelemek için önceden tanımlanmış eşikler kullanılarak sınırlayıcı kutular ayarlanmıştır. Veri kümeleri arasında tekdüzeliği sağlamak için tüm kullanıcı arayüzü (UI) öğeleri LabelImg açıklama aracı kullanılarak manuel olarak etiketlenmiştir. UI öğelerini buton, metin, görüntü, simge ve kapsayıcı gibi kategorilere ayırmak için etiketleme öncesinde önceden tanımlanmış bir şema oluşturulmuştur. Sınırlayıcı kutu gösterimi için tek tip bir koordinat sistemi uygulanmış ve öğeler arasındaki mekansal ilişkilere ve yerleşim ağacı içindeki üst-alt ilişkilerine dayalı hiyerarşik bilgiler oluşturulmuştur. Ek olarak, RICO, ENRICO ve Guo veri kümeleri genelinde öğelerin tutarlı şekilde etiketlenmesini, üst üste binen bileşenlerin uygun şekilde işlenmesini ve minimum boyut eşiklerinin uygulanmasını sağlamak için kılavuzlar belirlenmiştir.

Bileşen tespit eğitimi ve yerleşim düzeni deseni çıkarımı için ayrıntılı matematiksel formülasyonlar Ek Dosya 1'de sunulmuştur.

Faster R-CNN modeli, 0.9 momentum ve 0.0005 ağırlık azalması (weight decay) ile SGD kullanılarak eğitilmiştir. Başlangıç öğrenme oranı 0.001 olarak belirlenmiş ve doğrulama performansına dayalı bir adım azaltma (step decay) politikası kullanılarak ayarlanmıştır. Eğitim, 16'lık bir grup boyutu (batch size) ile 60 epoka kadar gerçekleştirilmiştir. Aşırı öğrenmeyi (overfitting) önlemek amacıyla, eğitim verilerinin %20'sini içeren bir doğrulama seti kullanılarak erken durdurma uygulanmıştır.

Eşleme fonksiyonu f(.) giriş olarak tespit edilen kullanıcı arayüzü (UI) öğelerini alır ve çıktı olarak hiyerarşik bir yerleşim temsili üretir. Bu fonksiyon, mekansal mesafe ve hizalama kriterlerine dayanarak UI öğeleri arasındaki komşuluk ilişkilerini hesaplar ve bu ilişkileri temsil etmek için bir komşuluk matrisi oluşturur. Ardından, ilgili bileşenleri gruplandırmak için DBSCAN gibi bir kümeleme algoritması uygulanır. Son olarak, kümelenmiş öğeler ebeveyn-çocuk ilişkilerine göre hiyerarşik yapılarda organize edilerek yapılandırılmış bir yerleşim temsili oluşturulur.

Renk uyumu modellemesine yönelik ayrıntılı formülasyonlar ve birleştirilmiş optimizasyon hedefi Ek Dosya 1'de sunulmuştur.

Bu amaç fonksiyonu; yapısal algılamanın, yerleşim akıl yürütmenin ve algısal renk modellemenin entegrasyonunu matematiksel olarak formalize ederek, çerçevenin tüm bileşenlerinin tutarlı ve kullanıcı merkezli kullanıcı arayüzü prototipleri oluşturmaya ortaklaşa katkı sağlamasını sağlar. Optimizasyon, çerçevenin her bir bileşeni için modüler bir şekilde gerçekleştirilir. Bileşen algılama modülünün eğitimi için SGD kullanılırken, birleşik amacın ortak optimizasyonu sırasında Adam optimize edici kullanılır. Birleşik amaç, genel sistem performansını yönlendirmek için kullanılır. Ortak optimizasyon aşamaları için amaç fonksiyonu, 0,001 öğrenme hızı ve 16 grup boyutu ile Adam optimize edici kullanılarak minimize edilir. Eğitim, doğrulama kaybı değişiminin beş ardışık epoch boyunca 10⁻⁴ değerinden düşük olduğu durumlarda erken durdurma uygulanarak 60 epoch'a kadar gerçekleştirilir.

Faster R-CNN kullanılarak bileşen tespiti

Önerilen çerçeve; butonlar, simgeler, metin alanları, görseller ve kapsayıcılar dahil olmak üzere kullanıcı arayüzü (UI) bileşenlerinin otomatik tespiti için Faster R-CNN kullanmaktadır. Faster R-CNN, yüksek nesne tespit doğruluğunu verimli bölge öneri üretimiyle birleştirdiği için bu görev için oldukça uygundur; bu durum, yoğun şekilde yerleştirilmiş öğeler içeren karmaşık UI düzenlerinin işlenmesi için temel teşkil etmektedir. Model, her UI ekranından konvolüsyonel özellik haritaları çıkarmak için ImageNet veri kümesi üzerinde önceden eğitilmiş bir ResNet-50 omurgası kullanır. Eğitim sırasında, genel görsel özellikleri korumak amacıyla erken katmanlar dondurulurken, üst katmanlar (conv4_x ve conv5_x) UI'ya özgü bileşen tespiti için ince ayar yapılmıştır. Bu özellik haritaları; görsel yapıları, kenarları, dokuları ve bileşen sınırlarını yakalar. Tespit sırasında, bölge öneri ağı (RPN), UI bileşenleri içerme olasılığı yüksek olan aday bölgeleri (çapalar/anchors) belirler. Çapalar, farklı boyutlardaki UI öğelerine uyum sağlamak için birden fazla ölçek (128, 256 ve 512) ve en-boy oranı (1:1, 1:2 ve 2:1) kullanılarak tanımlanmıştır. Eğitim sırasında, gerçek yerleşim kutularıyla (ground truth boxes) birlik üzerinden kesişim (IoU) değeri 0.7'den büyük olan çapalar pozitif, IoU değeri 0.3'ten küçük olanlar ise negatif olarak etiketlenmiş; ara IoU değerlerine sahip çapalar ise görmezden gelinmiştir. Her çapaya, bir bileşenin varlığını belirten bir olasılık atanır. Ardından, gereksiz ve örtüşen önerileri kaldırmak için maksimum olmayan baskılama (NMS) uygulanarak, karmaşık arayüzlerde bile anlamlı UI öğelerinin verimli bir şekilde yerelleştirilmesi sağlanır. Aday bölgeler üretildikten sonra, her öneri önceden tanımlanmış bileşen kategorilerine sınıflandırılır ve sınırlayıcı kutu (bounding-box) koordinatları iyileştirilir. Bir ilgi bölgesi (ROI) Align işlemi, her öneri için sabit boyutlu özellik temsilleri çıkarır ve bunlar daha sonra sınıflandırma ve regresyon için tam bağlı katmanlar tarafından işlenir. Sınıflandırma dalı sınıf olasılıklarını üretirken, regresyon dalı kesin sınırlayıcı kutu koordinatlarını tahmin eder. Tüm Faster R-CNN modeli, RPN kaybını nihai tespit kaybıyla birleştiren ortak bir kayıp fonksiyonu optimize edilerek uçtan uca eğitilir. Bu, sistemin UI bileşenlerini yalnızca doğru bir şekilde tanımasını değil, aynı zamanda çeşitli arayüz yapıları genelinde onları hassas bir şekilde yerelleştirmesini de sağlar. RPN aşaması, ROI sınıflandırması, sınırlayıcı kutu iyileştirmesi ve nihai optimizasyon hedefi dahil olmak üzere Faster R-CNN bileşen tespitinin ayrıntılı bir açıklaması Supplementary File 1 dosyasında sunulmuştur.

Algoritma S1, detaylı bileşen tespiti ve yapısal çıkarım iş akışını sunmaktadır (Ek Dosya 1). Bu algoritma, ham bir ekran görüntüsünden otomatik Kullanıcı Arayüzü (UI) bileşen tespitinin ve yapısal çıkarımın tüm sürecini açıklamaktadır. Giriş görüntüsü önce ön işlemden geçirilir ve derin görsel özellikleri çıkarmak için bir CNN omurgasından aktarılır. Bu özellikler, RPN tarafından aday sınırlayıcı kutular oluşturmak için kullanılır ve ardından sınıflandırma ve regresyon yoluyla rafine edilir. NMS, doğru yerelleştirmeyi sağlamak için gereksiz tespitleri kaldırır. Tespit işlemini takiben bileşenler, gürültülü uygulamaların yoğunluk tabanlı mekansal kümelemesi (DBSCAN) kullanılarak mekansal yakınlığa göre gruplandırılır. Bu kümeleme adımı, bileşenler arasındaki ebeveyn-çocuk ilişkilerini ve mantıksal gruplandırmaları yakalayan hiyerarşik bir UI ağacının oluşturulmasına olanak tanır. Bu hiyerarşik temsil, sonraki yerleşim analizi ve UI anlamlandırma işlemleri için temel oluşturur. Şekil 2, bir mobil UI ekranındaki Faster R-CNN bileşen tespit sürecini göstermektedir. Giriş arayüzü (sol), butonlar ve metin blokları gibi otomatik olarak sınırlayıcı kutular içine alınan UI öğelerini içerir. Tespit edilen bu bölgeler, etiketli bağlantılarla belirtildiği gibi, bileşen kategorilerine (örneğin, Buton ve Metin) göre sınıflandırılır. Faster R-CNN tespit modülü (sağ), sınırlayıcı kutu koordinatlarını rafine eder, anlamsal etiketler atar ve yapılandırılmış bileşen düzeyinde bilgi çıktısı verir. Bu adım; UI bileşenlerinin doğru ve anlamsal olarak anlamlı temsillerini sağlayarak yerleşim çıkarımı, bilişsel optimizasyon ve UI prototip oluşturma dahil olmak üzere sonraki süreçler için kritik bir temel oluşturur.

figure-protocol-2
Şekil 2. Faster R-CNN kullanılarak kullanıcı arayüzü öğelerinin bileşen tespiti. Şekil, bir giriş arayüzü ekran görüntüsünden UI bileşenlerinin tespitini göstermektedir. İlgi bölgeleri sınırlayıcı kutular kullanılarak belirlenmiş ve butonlar ile metin alanları gibi öğeler Faster R-CNN kullanılarak sınıflandırılmıştır. Oklar, tespit edilen bileşenlerin ilgili semantik etiketleriyle eşleştirilmesini göstermektedir. Bu şeklin daha büyük bir versiyonunu görüntülemek için lütfen buraya tıklayın.

Yerleşim düzeni desen çıkarımı ve hiyerarşik modelleme

Faster R-CNN kullanılarak yapılan bileşen tespitinin ardından, her bir kullanıcı arayüzü (UI) öğesi bir sınırlayıcı kutu (bounding box) ile temsil edilir. Ancak, bu sınırlayıcı kutular tek başına öğelerin arayüz içinde yapısal olarak nasıl organize edildiğini; örneğin, hangi öğelerin başlıklara, navigasyon çubuklarına veya gruplandırılmış içerik bölgelerine ait olduğunu belirtmez. Bu kısıtlamayı gidermek için tespit edilen bileşenler, her bileşenin bir düğüm olarak kabul edildiği ve fonksiyonel veya görsel olarak ilişkili bileşenlerin ortak üst düğümler altında gruplandırıldığı mantıksal bir UI ağacına dönüştürülür. Anlamlı yerleşim gruplarını belirlemek için DBSCAN veya hiyerarşik kümeleme gibi kümeleme teknikleri uygulanır. Bu yöntemler, UI öğeleri arasındaki ilişkileri tespit etmek için bileşenler arasındaki mekansal yakınlığı ve hizalama modellerini analiz eder. İnsan tasarım uygulamalarına benzer bir şekilde sistem; başlıklar, altbilgiler, ızgaralar ve içerik blokları gibi yaygın yapısal modelleri tanımayı öğrenir. Gruplandırma işlemi tamamlandığında; kapsamlı bir yerleşim temsili oluşturmak amacıyla hizalama, ızgara organizasyonu ve okuma sırası dahil ek yapısal özellikler analiz edilir. Örneğin, eşit genişlikteki sütunlarda hizalanmış bileşenler kart tabanlı bir yerleşimi işaret edebilirken, dikey olarak istiflenmiş öğeler bir form veya akış tabanlı arayüzü işaret edebilir. Kümeleme, mekansal muhakeme ve hizalama kurallarını entegre eden bu çerçeve, hem görsel gruplandırmayı hem de fonksiyonel ilişkileri yakalayan hiyerarşik bir UI ağacı oluşturur. Bu hiyerarşik temsil, sonraki yerleşim iyileştirme ve çoklu ekran tutarlılık modellemesi için temel oluşturarak sistemin yapılandırılmış, tutarlı ve kullanıcı merkezli arayüz tasarımları oluşturmasını sağlar.

Uzamsal mesafe ve hizalama benzerliği için ayrıntılı formülasyonlar Ek Dosya 1'de sunulmuştur.

Yerleşim gruplandırması için kümeleme (DBSCAN)

Düzen gruplarını belirlemek için DBSCAN uygulanır. DBSCAN iki parametre kullanır: (1) ε = komşu bileşenler arasındaki maksimum mesafe ve (2) = bir küme oluşturmak için gereken minimum bileşen sayısı. Bu analiz için DBSCAN parametreleri, normalize edilmiş kullanıcı arayüzü (UI) çözünürlüğüne (480 × 800 piksel) dayanarak ampirik olarak seçilmiştir. Komşuluk mesafesi parametresi, bitişik UI bileşenleri arasındaki mekansal yakınlığı yakalamak için ε = 50 piksel olarak ayarlanmıştır. Bir küme oluşturmak için gereken minimum nokta sayısı, önemsiz veya hatalı UI bileşeni gruplarının oluşmasını önlemek amacıyla MinPts = 3 olarak belirlenmiştir.

Ayrıntılı mantıksal kullanıcı arayüzü (UI) ağaç yapısı oluşturma formülasyonu Ek Dosya 1'de sunulmuştur.

CAM02-UCS ile algısal renk modelleme

Algısal renk modellemesi, oluşturulan kullanıcı arayüzünde (UI) kullanılan renklerin uyumlu, okunaklı ve bilişsel açıdan verimli olmasını sağlar. Baskın renkler, kümeleme teknikleri kullanılarak UI görüntüleri gibi girdi kaynaklarından çıkarılır. Spesifik olarak, temsili renk paletleri elde etmek için K-means++ başlatma ile K-means kümelemesi 300 iterasyon boyunca uygulanır. Ancak, RGB renk uzayı insan görsel algısını tam olarak yansıtmaz; bu durum, sayısal olarak benzer renklerin algısal olarak farklı görünebileceği anlamına gelir. Bu kısıtlamayı gidermek için, çıkarılan tüm renkler algısal olarak tekdüze olan CAM02-UCS'ye dönüştürülür. Bu uzayda eşit mesafeler, algılanan eşit renk farklarına karşılık gelir ve bu da onu renk uyumu ve kontrastını modellemek için uygun hale getirir. CAM02-UCS'ye eşlendikten sonra, algısal renk farkları Öklid mesafesi kullanılarak hesaplanır ve böylece sistemin renkler arasındaki kontrastı, uyumu ve varyasyonu nicelleştirmesi sağlanır. Okunabilirliği artırmak için birbirine çok benzer olan renkler ayrıştırılırken, görsel rahatsızlığı önlemek için aşırı kontrastlı renkler yumuşatılır. Oluşturulan palet ayrıca, ön plan ve arka plan öğeleri arasında yeterli kontrastı sağlayarak WCAG AA ve AAA gibi erişilebilirlik standartlarına uygun hale getirilir. Ayrıca, hedeflenen UI temasına bağlı olarak palet ilişkileri tamamlayıcı, benzer veya triadik şemalarla kısıtlanarak renk uyumu zorunlu kılınır. Bu, sonuçta ortaya çıkan renk paletinin yalnızca görsel olarak çekici değil, aynı zamanda fonksiyonel olarak erişilebilir ve bilişsel olarak optimize edilmiş olmasını sağlar. Paleti daha da geliştirmek için algısal benzerlik, kontrast, uyum ve marka tutarlılığı kısıtlamaları altında bir optimizasyon süreci uygulanır. Bir ana renk seçilir (örneğin marka kimliğinden) ve görsel hiyerarşiyi korumak için ikincil renklerin lüminesansı ve kroma değerleri ayarlanır. Kural tabanlı bir değerlendirme mekanizması, aday paletleri algısal mesafeler ve erişilebilirlik metriklerine göre değerlendirerek estetik dengeyi korurken bilişsel yükü minimize eder. Sonuç olarak bu çerçeve; profesyonel düzeyde tutarlılık, okunabilirlik ve algısal süreklilik sergileyen UI renk şemaları üretir.

CAM02-UCS tabanlı algısal renk modellemesi için ayrıntılı matematiksel ifadeler Ek Dosya 1'de sunulmuştur.

Algoritma S2 (Ek Dosya 1) , harmoni ve erişilebilirlik kısıtlamaları altında CAM02-UCS tabanlı algısal renk çıkarma ve optimizasyon iş akışını açıklamaktadır. Başlangıçta, renk farklılıklarının insan algısıyla örtüşmesini sağlamak amacıyla giriş görüntüsünden baskın renkler çıkarılır ve CAM02-UCS'ye dönüştürülür. Ardından, hem netliği hem de armoniyi korumak için renkler arasındaki algısal mesafeler hesaplanır ve önceden tanımlanmış sınırlar içinde kısıtlanır. Sonrasında, WCAG kılavuzlarına göre lüminans kontrast oranları değerlendirilerek erişilebilirlik sağlanır. Final paleti; algısal boşluğu, kontrast gereksinimlerini ve renk armonisi kısıtlamalarını dengeleyen birleşik bir amaç fonksiyonu optimize edilerek elde edilir. Bu süreç, oluşturulan kullanıcı arayüzü (UI) renk şemalarının yalnızca görsel olarak çekici değil, aynı zamanda okunabilir, erişilebilir ve algısal olarak tutarlı olmasını sağlar.

Bilişsel tasarım optimizasyonu

Bilişsel tasarım optimizasyonu, otomatik olarak oluşturulan kullanıcı arayüzü (UI) prototiplerinin yalnızca görsel olarak tutarlı olmasını değil, aynı zamanda anlaşılmasının ve etkileşim kurulmasının da kolay olmasını sağlar. Bu modül, UI bileşenlerinin düzenlemesine, gruplandırılmasına ve boşluklarına rehberlik etmek için Gestalt ilkeleri, Fitts yasası ve Hick yasası dahil olmak üzere temel bilişsel tasarım ilkelerini entegre eder. Bilişsel tasarım optimizasyonuna ilişkin ayrıntılı matematiksel formülasyonlar Ek Dosya 1'de sunulmuştur.

Entegre bilişsel optimizasyon hedefi

Entegre bilişsel optimizasyon hedefinin matematiksel ifadesi Ek Dosya 1'de sunulmuştur. Görsel gruplandırmanın, etkileşim verimliliğinin ve karar karmaşıklığının önemini temsil eden katsayılar sırasıyla alfa, beta ve gama ile gösterilmiştir. Bu çalışmada, alfa, beta ve gama değerleri doğrulama veri seti kullanılarak ampirik olarak belirlenmiştir. Mevcut deney için katsayılar şu şekilde ayarlanmıştır: α = 0.5, β = 0.3 ve γ = 0.2. Bu yapılandırma; görsel gruplandırma, etkileşim verimliliği ve karar basitliği arasında etkili bir denge sağlar.

Çoklu ekran tutarlılığı ve kullanıcı arayüzü (UI) oluşturma

Çoklu ekran tutarlılık modellemesi, bir uygulama içindeki farklı ekranların tutarlı bir görsel kimliği, yapısal düzeni ve etkileşim modelini paylaşmasını sağlar. Kullanıcılar ekranlar arasında geçiş yaparken, öğe yerleşimi, tipografi, boşluklandırma ve görsel hiyerarşi konusunda beklentiler geliştirirler. Bu beklentileri karşılamak için sistem, RICO ve ENRICO veri kümelerinden türetilen şablonları kullanarak ekranlar arası modelleri analiz eder. Bu şablonlar; ana sayfa–detay düzenleri, liste–detay modelleri, çok adımlı formlar ve panel akışları gibi yaygın kullanıcı arayüzü (UI) yapılarını yakalar. Bileşen yerleşimini ve gruplama davranışını karşılaştırarak sistem, hangi öğelerin tutarlı kalması ve hangilerinin değişkenlik gösterebileceğini belirleyen ekranlar arası yapısal bir profil oluşturur. Yapısal modeller tanımlandıktan sonra çerçeve; tipografi ölçeklerinde, boşluk oranlarında, ızgara düzenlerinde ve navigasyon çıpalarında tutarlılığı uygular. Örneğin, üst bilgi çubukları tutarlı bir yüksekliği korur, birincil düğmeler tek tip boyut ve hizalamaya sahip olur ve içerik blokları öngörülebilir bir görsel sıralamayı takip eder. Bu, her ekranın küresel yapısal kısıtlamalara göre değerlendirildiği bir düzen düzenleme işlemiyle gerçekleştirilir. Eğer bir ekran, tutarsız dolgu veya hizalanmamış başlıklar gibi öğrenilmiş şablonlardan saparsa, sistem tutarlılığı yeniden sağlamak için düzeni otomatik olarak ayarlar. Bu düzeltmeler, sorunsuz bir kullanıcı deneyimi (UX) sağlanmasına yardımcı olur ve ekranlar arasındaki bilişsel geçiş maliyetlerini azaltır. Çerçeve, etkileşim akışında tutarlılığı sürdürmek için ekranlar arasındaki navigasyon grafiğini daha ayrıntılı analiz eder. İleri/geri geçişler, sekmeli navigasyon ve çok adımlı iş akışları dahil olmak üzere yaygın navigasyon modelleri tanımlanır ve uygulanır. Her geçiş, kullanıcının zihinsel modeliyle uyumluluğu sağlamak için doğrulanır; böylece kullanılabilirlik artırılır ve kafa karışıklığı azaltılır. Sonuç olarak, çoklu ekran tutarlılık modeli görsel gürültüyü minimize eder, aşinalığı artırır ve birleştirilmiş bir etkileşim deneyimini destekler.

Çoklu ekran tutarlılığı ve kullanıcı arayüzü (UI) oluşturma için detaylı matematiksel formülasyonlar Ek Dosya 1'de sunulmuştur.

Son olarak, işleme motoru SVG tel çerçeveler, HTML/CSS prototipleri veya piksel tabanlı kullanıcı arayüzü (UI) maketleri gibi formatlarda görsel çıktılar üretir. Ortaya çıkan kullanıcı arayüzü ekranları; doğru okuma sırasını, uyumlu renk ilişkilerini, hassas ızgara hizalamasını ve birden fazla ekran boyunca tutarlı bir görsel hiyerarşiyi sergiler.

Algoritma S3, bilişsel-görsel düzen optimizasyonu ve çoklu ekran tutarlılığı iş akışını sunmaktadır (Ek Dosya 1). Algoritma S3, kullanıcı dostu kullanıcı arayüzü (UI) düzenleri oluşturmak için kullanılan entegre bilişsel ve yapısal optimizasyon sürecini tanımlar. Bu algoritma; algısal gruplandırmayı (Gestalt ilkeleri), etkileşim verimliliğini (Fitts yasası) ve karar basitliğini (Hick yasası) birleşik bir optimizasyon çerçevesinde birleştirir. Başlangıçta, algısal gruplandırmaları oluşturmak için bileşenler arasındaki mekânsal ilişkiler değerlendirilir. Ardından, bileşen boyutu ve yerleşimi ayarlanarak etkileşim verimliliği optimize edilirken, kullanıcılara sunulan seçenek sayısı sınırlandırılarak karar karmaşıklığı kontrol altına alınır. Ek olarak algoritma, her ekranı öğrenilmiş düzen şablonlarıyla hizalayarak tipografi, boşluklandırma ve yapısal organizasyonda tekdüzeliği sağlar ve böylece çoklu ekran tutarlılığını uygular. Daha sonra, çok amaçlı bir optimizasyon fonksiyonu; hizalama, boşluklandırma ve bilişsel maliyeti dengeleyerek düzeni geliştirir ve sonuçta hem görsel olarak uyumlu hem de bilişsel olarak verimli bir arayüz ortaya çıkarır. Genel olarak bu algoritma, oluşturulan çoklu ekran düzenlerinin yüksek düzeyde görsel tutarlılık, kullanılabilirlik ve algısal netlik korumasını sağlar.

Sonuçlar

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Önerilen otomatik kullanıcı arayüzü (UI) prototipleme çerçevesi; 4.000 RICO görüntüsü, 1.000 ENRICO ekranı ve Guo'nun UI Renk Veri Seti'nden alınan renk etiketli 128 UI örneği olmak üzere üç kaynaktan gelen toplam 5.128 UI ekranlık entegre bir veri seti kullanılarak değerlendirilmiştir. Bu harmanlanmış veri seti; bileşen tespit doğruluğu, yerleşim yapısal netliği, çoklu ekran tutarlılığı ve algısal renk uyumunun değerlendirilmesi için dengeli bir kıyaslama noktası sağlamaktadır.

Deneysel sonuçlar, Faster R-CNN tabanlı tespit modelinin %92,4'lük bir bileşen tespit doğruluğuna ulaştığını ve çeşitli mobil kullanıcı arayüzü (UI) stilleri genelinde etkili bir genelleme yaptığını göstermektedir. Ayrıca, ENRICO desen açıklamalarının dahil edilmesi yerleşim akıl yürütmesini geliştirerek, yerleşim netliğinde %18,7'lik bir artış sağlamış ve okuma sırasının korunmasını iyileştirmiştir. Renk değerlendirme deneylerinde, CAM02-UCS güdümlü renk modelleme modülü, tasarımcı değerlendirmelerine göre %24,5 daha uyumlu paletler oluşturmuş ve geleneksel RGB ve LAB tabanlı palet oluşturma yöntemlerine kıyasla daha yüksek algısal tekdüzelik sağlamıştır. Dahası, çoklu ekran tutarlılık modellemesi, ekranlar arası hizalamada ve tipografi tutarlılığında %28'lik bir iyileşme sağlamıştır. 30 katılımcının yer aldığı kullanıcı çalışmaları, önerilen sistem tarafından üretilen prototiplerle etkileşime girildiğinde algılanan bilişsel yükte %31'lik bir azalma olduğunu göstermektedir. Birlikte değerlendirildiğinde bu sonuçlar, bileşen tespiti, algısal renk modelleme ve bilişsel optimizasyonun birleştirilmesinin, yalnızca yapısal olarak doğru değil, aynı zamanda görsel olarak tutarlı ve bilişsel olarak verimli UI prototipleri ürettiğine işaret etmektedir. Tablo 3, önerilen UI prototipleme çerçevesini değerlendirmek için kullanılan simülasyon ortamını ve teknik ayarları vurgulamaktadır. Faster R-CNN ve yerleşim tutarlılık modüllerinin hesaplama açısından yoğun eğitim prosedürleri, yüksek performanslı bir NVIDIA RTX 4090 GPU ile desteklenmiştir. Tüm deneyler, derin öğrenme uygulaması için PyTorch 2.0 kullanılarak bir Ubuntu 22.04 ortamında gerçekleştirilmiştir.

Parametre	Konfigürasyon
Donanım	NVIDIA RTX 4090 GPU (24 GB), Intel i9 Processor, 64 GB RAM
İşletim Sistemi	Ubuntu 22.04 LTS
Derin Öğrenme Çerçevesi	PyTorch 2.0
Faster R-CNN Omurgası	ResNet-50 + FPN
Görüntü Çözünürlüğü	480 × 800 (tüm veri setlerinde normalize edilmiştir)
Eğitim Paket Boyutu	8
Optimize Edici	AdamW (LR = 1e−4, Weight Decay = 0.01)
Epok Sayısı	40
Renk Modelleme Alanı	CAM02-UCS
Palet Çıkarımı için Kümeleme	K-means (k = 5)
Yerleşim Kümeleme	DBSCAN (ε = 20, min_samples = 3)

Tablo 3: Önerilen çerçevenin uygulama parametreleri ve deneysel konfigürasyonu. Tablo; hesaplama kaynakları, işletim sistemi, derin öğrenme çerçevesi, model mimarisi, görüntü çözünürlüğü, eğitim parametreleri, optimizasyon stratejisi, renk modelleme alanı ve palet çıkarımı ile yerleşim gruplandırması için kullanılan kümeleme yöntemleri dahil olmak üzere model eğitimi ve değerlendirmesi için kullanılan donanım ve yazılım kurulumunu özetlemektedir.

Faster R-CNN mimarisi, geniş bir yelpazedeki ince taneli kullanıcı arayüzü (UI) bileşenlerini tespit etmek için FPN ile birlikte bir ResNet-50 omurgası kullanır. Tüm UI görüntüleri, işleme tabi tutulmadan önce tekdüze olarak 480 × 800 piksel boyutuna getirilir. Eğitim, kararlı yakınsama sağlamak amacıyla 16'lık bir grup boyutu ile SGD optimize edici kullanılarak 60 epok boyunca gerçekleştirilir. Renk paleti oluşturucu, K-ortalamalar kümelemesi ile CAM02-UCS kullanırken, yapısal düzen kümelemesi için DBSCAN kullanılır. Bu teknik ayarlar, üretilen UI sonuçlarının tekrarlanabilir, kararlı ve yüksek sadakatli olmasını sağlar. Önerilen otomatik UI prototipleme çerçevesinin kapsamlı bir değerlendirmesini sunmak için dört kategori değerlendirme metriği kullanılır:

i) Faster R-CNN modelinin RICO ve ENRICO veri setlerindeki kullanıcı arayüzü (UI) bileşenlerini tanımlamadaki doğruluğunu nicelleştiren kesinlik (precision), duyarlılık (recall), F1-skoru, birlik üzerinden kesişim (IoU) ve ortalama ortalama kesinlik (mAP) kullanılarak analiz edilen bileşen tespit performansı;

ii) Tasarım kalıbı kısıtlamalarından türetilen hizalama hatası (AE), gruplandırma doğruluğu, okuma sırası düzgünlüğü ve ekranlar arası tutarlılık puanları aracılığıyla ölçülen yerleşim netliği ve yapısal tutarlılık;

iii) CAM02-UCS algısal mesafe (ΔE_UCS), WCAG 2.1 kontrast oranları, çeşitlilik indeksi ve Guo’nun kullanıcı arayüzü renk değerlendirme çerçevesinden esinlenen renk uyumu skorları kullanılarak değerlendirilen algısal renk kalitesi;

iv) NASA görev yükü indeksi (NASA-TLX) ile ölçülen bilişsel yük, estetik tutarlılık derecelendirmeleri ve görev tamamlama verimliliği dahil olmak üzere kullanıcı merkezli bilişsel verimlilik metrikleri.

Bu metrikler, çerçevenin yalnızca tespit doğruluğu açısından değil, aynı zamanda algısal uyum, kullanılabilirlik kalitesi ve bilişsel deneyim açısından da değerlendirilmesine olanak tanır.

Bileşen tespit metrikleri

Hassasiyet (precision), modelin yanlış pozitifler üretmeden kullanıcı arayüzü (UI) bileşenlerini tahmin etmedeki kesinliğini tanımlar. Yüksek hassasiyet, tahmin edilen sınırlayıcı kutuların çoğunun geçerli UI öğelerine karşılık geldiği anlamına gelir. Duyarlılık (recall), modelin ekrandaki tüm ilgili UI bileşenlerini tanımlama yeteneğini ölçer. Yüksek duyarlılık, modelin gerçek değerdeki (ground-truth) bileşenlerin çoğunu başarıyla tespit ettiğini gösterir. Hassasiyet ve duyarlılığın harmonik ortalaması olarak tanımlanan F1 skoru, dengeli bir değerlendirme sağlar ve özellikle UI bileşenlerinin veri kümeleri genelinde düzensiz dağıldığı durumlarda yararlıdır.

IoU metriği, tahmin edilen sınırlayıcı kutunun gerçek değer (ground truth) sınırlayıcı kutusuyla ne kadar iyi örtüştüğünü ölçer. Nesne tespit görevlerinde, orta ve katı değerlendirme koşullarını temsil etmek için yaygın olarak 0,5 ve 0,75'lik IoU eşik değerleri kullanılır. mAP, birden fazla IoU eşiğindeki tespit performansını özetler. mAP@0.5:0.95 metriği, 0,5'ten 0,95'e kadar 0,05'lik adımlarla kesinliği (precision) ortalayarak daha sağlam bir değerlendirme sağlar ve bu nedenle nesne tespiti için standart bir kıyaslama ölçütü olarak yaygın şekilde kabul edilir.

Üç veri seti genelindeki tespit sonuçları, önerilen bileşen tespit modülünün tutarlı bir şekilde iyi performans gösterdiğini belirtmektedir. Kantitatif sonuçlar Tablo 4'te sunulmuştur. RICO veri seti, geniş ve çeşitli Kullanıcı Arayüzü (UI) bileşen açıklamaları sayesinde 0,91 kesinlik (precision), 0,88 duyarlılık (recall) ve 0,89 F1-skoru ile en yüksek performansı sergilemektedir. ENRICO, daha basitleştirilmiş yapısı ve daha az açıklanmış bileşen türleri nedeniyle biraz daha düşük skorlar göstermektedir. Guo veri seti, muhtemelen tespiti daha zor hale getiren daha fazla görsel varyasyon ve daha az standart düzen deseni nedeniyle en düşük F1-skorunu (0,81) kaydetmiştir. Genel olarak bu sonuçlar, modelin farklı UI tasarım stilleri ve veri seti özellikleri genelinde güçlü bir bileşen tespit performansı sürdürdüğünü doğrulamaktadır.

Veri Seti	Kesinlik	Duyarlılık	F1-skoru
RICO	0.91	0.88	0.89
ENRICO	0.87	0.84	0.85
Guo	0.83	0.8	0.81

Tablo 4: Veri kümeleri genelindeki bileşen tespit performansı. Tablo; RICO, ENRICO ve Guo veri kümeleri üzerinden kullanıcı arayüzü (UI) bileşen tespitine yönelik kesinlik (precision), geri çağırma (recall) ve F1-skorunu sunarak tespit modelinin etkinliğini göstermektedir.

Şekil 3, modelin RICO, ENRICO ve Guo veri kümeleri genelindeki performansını 0,5 ve 0,75 IoU eşiklerinde göstermektedir. Beklendiği üzere, daha esnek örtüşme gereksinimi nedeniyle mAP değerleri IoU 0,5'te daha yüksektir. RICO, açıklama zenginliğini ve tutarlılığını yansıtacak şekilde tutarlı bir şekilde en yüksek mAP değerlerini bildirmektedir (IoU 0,5'te 0,89 ve IoU 0,75'te 0,78). ENRICO biraz daha düşük değerler gösterirken, Guo, düzen tarzındaki ve bileşen yoğunluğundaki daha büyük varyasyonlar nedeniyle en düşük puanları bildirmektedir. Daha katı IoU eşikleriyle birlikte görülen düşüş eğilimi, veri kümesi karmaşıklığının tespit sağlamlığını doğrudan etkilediğini göstermektedir.

figure-results-1
Şekil 3. Farklı veri kümelerinde 0,5 ve 0,75 birlik kesişim üzerinden birleşim (IoU) eşik değerlerindeki ortalama ortalama hassasiyet (mAP). Çizgi grafiği, RICO, ENRICO ve Guo veri kümelerindeki bileşen tespit performansını karşılaştırmaktadır. x-ekseni veri kümelerini, y-ekseni ise mAP değerlerini göstermektedir. İki eğri 0,5 ve 0,75'lik IoU eşik değerlerine karşılık gelmekte olup, farklı tespit titizliği seviyelerindeki performans varyasyonunu örneklemektedir. Bu şeklin daha büyük bir versiyonunu görüntülemek için lütfen buraya tıklayın.

Şekil 4, on farklı IoU eşiği boyunca tespit performansının daha geniş bir değerlendirmesini sağlayarak her bir veri seti için mAP@IoU(0.5:0.95) değerlerini sunmaktadır. Sonuçlar, RICO'dan (0,61) ENRICO'ya (0,57) ve Guo'ya (0,52) doğru belirgin bir düşüş eğilimi olduğunu ortaya koymakta ve önerilen tespit modelinin daha büyük ve daha yapılandırılmış veri setlerinde en iyi genelleme performansını sergilediğini doğrulamaktadır. Bu daha katı ortalama metrik, tek eşikli değerlendirmede belirginleşmeyebilecek küçük performans düşüşlerini vurgulamaktadır. Bu bulgular, modelin tüm veri setlerinde güçlü performans göstermesine rağmen, artan düzen çeşitliliğinin ve bileşen değişkenliğinin titiz COCO tarzı değerlendirmeler altında ek zorluklar çıkardığını göstermektedir. Tespit sonuçları, farklı IoU seviyeleri genelinde mAP'nin nicel karşılaştırmalarını sunan Şekil 3 ve 4'te verilmiştir.

figure-results-2
Şekil 4. Veri kümelerinde 0,5 ile 0,95 arasındaki birlik üzerinden kesişim (IoU) eşikleri üzerinden ortalanmış ortalama ortalama kesinlik (mAP). Çizgi grafiği, 0,5 ile 0,95 arasında değişen IoU eşikleri üzerinden ortalanmış mAP metriği kullanılarak RICO, ENRICO ve Guo veri kümelerindeki bileşen tespit performansını göstermektedir. x-ekseni veri kümelerini temsil ederken, y-ekseni farklı tespit eşikleri altındaki model performansını yansıtan, 0–1 ölçeğinde bildirilen karşılık gelen mAP değerlerini belirtmektedir. Bu şeklin daha büyük bir versiyonunu görüntülemek için lütfen buraya tıklayın.

Yerleşim kalitesi metrikleri

Düzen kalitesi; oluşturulan kullanıcı arayüzü (UI) düzenlerinin yapısal doğruluğunu, algısal organizasyonunu ve bilişsel okunabilirliğini toplu olarak değerlendiren AE, gruplandırma doğruluğu (GA) ve okuma sırası doğruluğu (ROA) kullanılarak değerlendirilir.

Hizalama hatası.

AE (piksel tabanlı sapma), kullanıcı arayüzü (UI) öğelerinin sol, sağ, üst veya taban çizgisi kılavuzları gibi ideal hizalama çizgileriyle ne kadar uyumlu olduğunu gösterir. Daha düşük bir AE, öğelerin minimum görsel bozulmayla tutarlı bir şekilde düzenlendiğini belirterek okunabilirliği ve genel tasarım netliğini artırır. Hizalama hataları görsel akışı bozduğu ve algılanan karmaşıklığı artırdığı için bu metrik, özellikle bilişsel düzen iyileştirmesini değerlendirmek açısından önemlidir. Şekil 5; RICO, ENRICO ve Guo veri kümeleri genelindeki AE değerlerini, ideal hizalama çizgilerinden ortalama piksel sapması olarak ölçülmüş şekilde göstermektedir. Sonuçlar, RICO'nun en düşük AE değerine (4.2 px) ulaştığını, bu durumun söz konusu veri kümesindeki UI bileşenlerinin daha tutarlı yapısal modeller sergilediğini ve bunun da model için hizalamayı kolaylaştırdığını göstermektedir. ENRICO, iyi yapılandırılmış ve çeşitli ekran düzenlerinin bir kombinasyonunu yansıtan 6.1 px'lik orta düzeyde bir hizalama sapması ile onu takip etmektedir. Guo veri kümesi, bileşen yerleşimindeki yüksek çeşitlilik ve hizalama tabanlı iyileştirmeyi zorlaştıran standart dışı düzen yapıları nedeniyle en yüksek AE değerini (7.4 px) kaydetmiştir. Genel olarak bu sonuçlar, artan düzen karmaşıklığına rağmen modelin veri kümeleri genelinde güçlü bir hizalama doğruluğunu koruduğunu kanıtlamaktadır.

figure-results-3
Şekil 5. Veri setleri genelindeki hizalama hatası. Şekil, veri setleri genelindeki hizalama hatasını göstermektedir; daha düşük değerler daha iyi hizalamayı belirtir. Bu şeklin daha büyük bir versiyonunu görüntülemek için lütfen buraya tıklayın.

Gruplandırma doğruluğu (GA).

GA, modelin ilgili Kullanıcı Arayüzü (UI) bileşenlerini; örneğin yakınlık, benzerlik ve süreklilik gibi Gestalt ilkelerine dayanarak ne kadar etkili bir şekilde gruplandırdığını nicelleştirir. Daha yüksek gruplandırma doğruluğu, modelin UI öğelerinin amaçlanan yapısını koruduğunu ve böylece kullanıcıların arayüzü daha doğal bir şekilde yorumlamalarına olanak tanıdığını gösterir. Bu metrik, düzen iyileştirme modülünün içeriği anlamlı görsel gruplar halinde başarıyla organize edip etmediğini değerlendirmek için özellikle faydalıdır. Şekil 6, önerilen çerçevenin üç veri kümesinde elde ettiği GA dağılımını sunmaktadır. ENRICO veri kümesi, iyi tanımlanmış ve desenle etiketlenmiş düzenleri nedeniyle en yüksek medyan GA'yı ve en küçük çeyrekler arası aralığı sergileyerek stabil ve tutarlı bir gruplandırma performansı göstermektedir. RICO veri kümesi, muhtemelen daha fazla çeşitlilik ve düzen karmaşıklığı nedeniyle daha yüksek değişkenlikle orta düzeyde gruplandırma doğruluğu göstermektedir. Guo UI Color veri kümesi, örnekleri görsel olarak heterojen olduğu ve yapısal düzene daha az odaklandığı için daha düşük gruplandırma doğruluğu kaydetmektedir. Genel olarak sonuçlar, bilişsel düzen iyileştirme modülünün veri kümeleri genelinde güvenilir şekilde çalıştığını ve yapısal olarak tutarlı verilerde en iyi gruplandırma performansını elde ettiğini göstermektedir.

figure-results-4
Şekil 6. Veri kümeleri genelinde gruplandırma doğruluğunun dağılımı.Kutu grafiği, RICO, ENRICO ve Guo'nun UI Renk Veri Kümeleri genelinde Gestalt ilkelerine dayalı gruplandırma doğruluğunu göstermektedir. Kutularle çeyrekler arası aralığı, merkezi çizgi medyanı ve kırbaçlar değerlerin aralığını temsil etmektedir. x-ekseni veri kümelerini, y-ekseni ise gruplandırma doğruluğu puanlarını göstermektedir. Örneklem büyüklüğü n=5128 kullanıcı arayüzü ekranıdır (RICO: 4000, ENRICO: 1000 ve Guo: 128). Bu şeklin daha büyük bir versiyonunu görüntülemek için lütfen buraya tıklayın.

Okuma sırası doğruluğu (ROA).

Okuma sırası doğruluğu (ROA), modelin bir kullanıcı arayüzü (UI) ekranının genellikle yukarıdan aşağıya ve soldan sağa olan doğal okuma akışını ne kadar doğru tahmin ettiğini ölçer. Doğru okuma sırasının korunması; kullanılabilirlik, navigasyon netliği ve yerleşik tasarım kurallarıyla uyum için temel öneme sahiptir. Daha yüksek ROA, sistemin beklenen bilişsel tarama modellerini koruduğunu gösterir. Şekil 7; RICO, ENRICO ve Guo veri kümeleri için farklı değerlendirme aşamalarındaki ROA değerlerini göstermektedir. ENRICO, insan benzeri okuma dizilerinin daha doğru tahmin edilmesini sağlayan düzenli ve örüntü odaklı yerleşim yapısı sayesinde tutarlı bir şekilde en yüksek ROA değerine ulaşmaktadır. RICO, daha fazla çeşitliliği ve gerçek dünya karmaşıklığını yansıtacak şekilde, hafif değişkenliklerle orta düzeyde bir performans sergilemektedir. Guo veri kümesi, ekranlarının çoğunun görsel olarak zengin olmasına rağmen net tanımlanmış okuma hiyerarşilerinden yoksun olması nedeniyle en düşük ROA değerini göstermektedir. Genel olarak bu sonuçlar, önerilen bilişsel yerleşim iyileştirme modülünün yapılandırılmış veri kümeleri üzerinde en güvenilir şekilde çalıştığını ve farklı UI tasarımlarında kararlı okuma sırası tahminleri sunduğunu göstermektedir.

figure-results-5
Şekil 7. Birden fazla veri seti için değerlendirme aşamaları boyunca okuma sırası doğruluğu. Çizgi grafiği; RICO, ENRICO ve Guo'nun UI Color veri setleri için değerlendirme adımları boyunca okuma sırası doğruluğunu göstermektedir. x-ekseni değerlendirme aşamasını, y-ekseni ise okuma sırası doğruluğunu belirtmektedir. Her bir eğri bir veri setine karşılık gelerek, ardışık değerlendirme aşamaları boyunca görsel akışın korunmasındaki değişiklikleri örneklendirmektedir. Değerlendirme aşaması, önerilen çerçevenin aşamalı iyileştirme süreçlerinin bir temsilidir. Bu şeklin daha büyük bir versiyonunu görüntülemek için lütfen buraya tıklayın.

Yerleşim tutarlılık puanı (LCS)

Düzen tutarlılık puanı (LCS), oluşturulan kullanıcı arayüzü (UI) düzenlerinin aynı uygulama içindeki birden fazla ekranda ne kadar tutarlı korunduğunu ölçer. Bu; boşluklandırma, hizalama kuralları, tipografi bölgeleri ve gruplandırma kalıplarındaki tutarlılığı kapsar. Daha yüksek bir puan, ekranlar arası uyumun arttığını gösterir ve bu da daha bütünleşik ve sezgisel bir kullanıcı deneyimi (UX) ile sonuçlanır. Şekil 8, RICO, ENRICO ve Guo'nun UI Renk Veri Setleri için birden fazla değerlendirme aşamasında ölçülen LCS değerlerini sunmaktadır. ENRICO veri seti, ekranlar arası tutarlılığın daha kararlı şekilde öğrenilmesini kolaylaştıran, kalıp etiketli ve yapısal olarak tek tip UI ekranları sayesinde tutarlı bir şekilde en yüksek LCS değerlerine ulaşmaktadır. Buna karşılık, RICO veri seti, modelin oldukça çeşitli UI düzenleri genelinde genelleme yapabilme yeteneğine bağlı olarak, orta düzeyde ancak istikrarlı bir şekilde iyileşen bir tutarlılık sergilemektedir. Beklendiği üzere, yapısal düzenden ziyade öncelikle renk özelliklerine odaklandığı için çoklu ekran tutarlılığını daha zorlu hale getiren Guo veri seti, en düşük LCS değerlerini kaydetmektedir. Genel olarak bu sonuçlar, önerilen ekranlar arası tutarlılık modülünün, tüm veri setlerinde ölçülebilir iyileştirmeler sağlarken, özellikle kalıp odaklı veri setlerinde en etkili şekilde çalıştığını göstermektedir.

figure-results-6
Şekil 8. Birden fazla veri seti için değerlendirme aşamaları boyunca düzen tutarlılık puanı.Çizgi grafiği; RICO, ENRICO ve Guo’nun UI Color veri setleri için değerlendirme aşamaları boyunca düzen tutarlılık puanlarını göstermektedir. x-ekseni değerlendirme aşamasını, y-ekseni ise düzen tutarlılık puanlarını temsil eder. Her bir eğri bir veri setine karşılık gelmekte olup, ardışık değerlendirme aşamaları boyunca oluşturulan arayüzlerin yapısal tutarlılığındaki artışı örneklendirmektedir. Bu şeklin daha büyük bir versiyonunu görüntülemek için lütfen buraya tıklayın.

Renk kalitesi metrikleri

Oluşturulan kullanıcı arayüzü (UI) renk temaları, CAM02-UCS'den türetilen beş algısal temelli metrik kullanılarak değerlendirilmektedir: palet renkleri arasındaki algısal düzenliliği nicelleştiren ΔE (algısal renk farkı); ön plan ve arka plan öğeleri arasındaki okunabilirliği değerlendiren kontrast oranı (WCAG 2.1 tabanlı); tonlar arasındaki estetik uyumluluğu ölçen renk uyumu indeksi (CHI); algısal renk uzayındaki varyasyonu yansıtan renk çeşitliliği skoru (CDS) ve palet içindeki renklerin dengesini ve baskınlığını değerlendiren renk belirginliği skoru (CPS). Bu metrikler birlikte, hem estetik kalite hem de kullanılabilirlik odaklı renk performansı hakkında kapsamlı bir değerlendirme sağlar. Sonuçlar, önerilen yöntemin 4.12 gibi daha düşük bir ΔE değeri elde ettiğini göstererek renkler genelinde iyileştirilmiş bir algısal düzenliliğe işaret etmektedir. 6.21'lik bir kontrast oranı, erişilebilirlik standartlarına uygunluğu doğrulayarak artırılmış okunabilirlik sağlamaktadır. Tablo 5, önerilen renk modelleme modülü ile temel yöntemler arasındaki nicel karşılaştırmayı sunmaktadır. CHI'nin 0.61'den 0.83'e yükselmesi, renk geçişlerinde iyileştirilmiş bir estetik bütünlüğe işaret etmektedir. Ayrıca, CDS'nin %50'den fazla artması, oluşturulan paletlerin görsel karmaşaya yol açmadan daha zengin varyasyonlar koruduğunu kanıtlamaktadır. Daha yüksek CPS değerleri, baskın renklerin dengeli bir dağılımına işaret ederek herhangi bir tek tonun aşırı doygunluğa ulaşmasını önlemektedir. Genel olarak bu sonuçlar, CAM02-UCS tabanlı renk modelleme modülünün uyumlu, okunabilir ve algısal olarak optimize edilmiş UI renk şemaları oluşturmadaki etkinliğini ortaya koymaktadır.

Metrik	Tanım	Önerilen Yöntem	Başlangıç düzeyi¹	İyileşme (%)
ΔE (CAM02-UCS)	Algısal renk farkı	4.12	7.85	%47,5 daha düşük
Kontrast Oranı (WCAG)	FG–BG çiftlerinin okunabilirliği	6.21	4.38	41.80%
CHI (Renk Uyumu İndeksi)	Renk tonu & kroma uyumu	0.83	0.61	36.10%
CDS (Renk Çeşitliliği Skoru)	J'deki Varyans′a′b′ uzay	18.70	12.40	50.80%
CPS (Renk Belirginlik Skoru)	Baskın renklerin stabilitesi	0.72	0.55	30.90%

Tablo 5: Önerilen ve temel yöntemler arasında renk kalitesi metriklerinin nicel karşılaştırması. Tablo; algısal renk farkı (CAM02-UCS'de ΔE), kontrast oranı (WCAG), renk uyumu indeksi (CHI), renk çeşitliliği puanı (CDS) ve renk belirginliği puanı (CPS) dahil olmak üzere renk kalitesine yönelik değerlendirme metriklerini sunmaktadır. Önerilen yöntemin sonuçları, yüzde iyileştirmelerle birlikte temel değerlerle karşılaştırılmıştır.

Katılımcı demografisi ve çalışma tasarımı

Değerlendirme sürecine toplam 30 katılımcı dahil edilmiştir. Katılımcıların yaşları 20 ile 35 arasındaydı (ortalama yaş: 26,4 ± 3,2 yıl). Kohort; yazılım mühendisleri, öğrenciler ve UI/UX tasarımcıları dahil olmak üzere çeşitli geçmişlere sahip bireyleri içermekteydi. Kendi bildirdikleri bilgisayar yeterliliğine göre katılımcıların %40'ı orta düzey kullanıcı, %35'i ileri düzey kullanıcı ve %25'i başlangıç düzeyi kullanıcı olarak sınıflandırılmıştır. Katılımcıların yaklaşık yarısı UI/UX tasarımı veya ilgili alanlarda önceden deneyime sahipken, geri kalan katılımcıların böyle bir deneyimi yoktu. Bu çeşitlilik, farklı teknik uzmanlık düzeyleri ve tasarım aşinalıkları genelinde dengeli bir değerlendirme sağlanmasını garanti etmiştir.

Kullanıcı çalışması metrikleri

Bilişsel yükü, kullanılabilirliği, görsel çekiciliği, verimliliği ve tutarlılığı değerlendirmek amacıyla NASA-TLX, sistem kullanılabilirlik ölçeği (SUS), estetik uyum puanı (AHS), arama verimlilik süresi (SET) ve ekranlar arası tutarlılık derecelendirmesi (CSCR) dahil olmak üzere birden fazla metrik kullanılarak kullanıcı merkezli değerlendirme yapılmıştır.

NASA-TLX metriği; zihinsel talep, çaba ve hayal kırıklığı gibi faktörleri ölçerek zihinsel iş yükünü nicelleştirir. Daha düşük puanlar, azalmış bilişsel yüke ve iyileşmiş etkileşim kolaylığına işaret eder. Önerilen çerçeve, tüm veri kümelerinde tutarlı bir şekilde daha düşük NASA-TLX puanları vermiş ve bu da zihinsel çabanın azaldığını göstermiştir. Bu iyileşme; Gestalt gruplandırma, optimize edilmiş boşluklandırma ve geliştirilmiş görsel hiyerarşi dahil olmak üzere, toplu olarak daha sezgisel navigasyonu kolaylaştıran bilişsel tasarım ilkelerinin entegrasyonuna bağlanabilir. SUS metriği, 0 ile 100 arasında değişen ve yüksek değerlerin artan kullanılabilirlik ile netliği belirttiği standartlaştırılmış bir kullanılabilirlik puanı sağlar. Önerilen çerçeve, baz yöntemlere kıyasla daha yüksek SUS puanları elde ederek hem yapısal yerleşim hem de renk netliğindeki iyileşmeleri yansıtmıştır. Geliştirilmiş hizalama, boşluklandırma ve navigasyon akışı, kullanıcıların daha sezgisel ve işlevsel olarak tutarlı algıladığı arayüzlere katkıda bulunmuştur. 7 puanlı Likert ölçeğinde ölçülen AHS, algılanan görsel çekiciliği ve renk uyumunu değerlendirir. CAM02-UCS tabanlı renk modelleme modülü kullanılarak oluşturulan arayüzler, daha pürüzsüz renk geçişleri ve görsel olarak daha dengeli paletlere işaret eden daha yüksek AHS değerleri elde etmiştir. Katılımcılar; iyileştirilmiş kontrast, ton tutarlılığı ve azalmış görsel karmaşa nedeniyle tutarlı bir şekilde bu arayüzleri tercih etmiş ve bu durum UI tasarımında algısal renk modellemenin önemini vurgulamıştır. SET, kullanıcıların görsel arama görevleri sırasında hedef UI öğelerini bulmaları için gereken süreyi ölçer. Daha düşük SET değerleri, iyileştirilmiş görsel organizasyon ve hiyerarşiye işaret eder. Önerilen çerçeve, tüm veri kümelerinde SET'i önemli ölçüde azaltarak Gestalt gruplandırma, dikkat odaklı boşluklandırma ve rafine edilmiş yerleşim yapılarının entegrasyonunun daha hızlı ve daha verimli etkileşimi mümkün kıldığını kanıtlamıştır. CSCR metriği, UI tasarımının birden fazla ekran arasındaki tutarlılığını değerlendirir. Daha yüksek puanlar; yerleşim, renk ve yapısal organizasyonda daha iyi bir sürekliliğe işaret eder. Önerilen çerçeve, arayüzler genelinde sabit renk şemalarının, boşluklandırmanın ve hiyerarşik yapıların korunmasında çok ekranlı tutarlılık modülünün etkinliğini yansıtan daha yüksek CSCR değerleri elde etmiştir.

Şekil 9, RICO, ENRICO ve Guo veri setleri genelinde tüm metrikler (NASA-TLX, SUS, AHS, SET ve CSCR) için karşılaştırmalı kullanıcı çalışması sonuçlarını sunmaktadır. Genel olarak, tüm değerlendirme metriklerinde tutarlı iyileşmeler gözlemlenmektedir. Özellikle Guo veri seti; daha düşük bilişsel yük (NASA-TLX), daha yüksek kullanılabilirlik (SUS), geliştirilmiş estetik uyum (AHS), azalmış arama verimliliği süresi (SET) ve geliştirilmiş ekranlar arası tutarlılık (CSCR) dahil olmak üzere kullanıcı merkezli metriklerde üstün performans sergilemektedir. Ancak, bu sonuçlar dikkatli bir yorumlama gerektirmektedir. Guo veri seti için gözlemlenen iyileştirilmiş UX metrikleri, üstün yapısal düzen kalitesinden ziyade, öncelikle güçlü renk tutarlılığına ve nispeten daha basit görsel kompozisyona bağlanmaktadır. Kullanıcılar bu arayüzleri görsel olarak daha uyumlu ve bilişsel olarak daha az zorlayıcı bulsa da, önceki sonuçlar Guo veri setinin hizalama, gruplandırma ve okuma sırası açısından düşük performans gösterdiğini kanıtlamaktadır. Bu durum, UI tasarımında algısal ve yapısal faktörler arasındaki önemli bir ayrımı vurgulamaktadır. Renk uyumu gibi algısal öznitelikler UX'i önemli ölçüde artırırken, yapısal doğruluk ve düzen tutarlılığı fonksiyonel kullanılabilirlik için kritik olmaya devam etmektedir. Bu nedenle, optimal UI tasarımı, algısal uyum ile yapısal doğruluk arasında bir denge gerektirmektedir.

figure-results-7
Şekil 9. Veri setleri arasında kullanıcı çalışması metriklerinin karşılaştırılması. Gruplandırılmış sütun grafiği; RICO, ENRICO ve Guo’nun UI Color veri setleri genelindeki kullanıcı çalışması metriklerini karşılaştırmaktadır. x-ekseni, NASA Görev Yükü İndeksi (NASA-TLX), sistem kullanılabilirlik ölçeği (SUS), estetik uyum puanı (AHS), yapısal verimlilik süresi (SET) ve ekranlar arası tutarlılık oranı (CSCR) dahil olmak üzere değerlendirme metriklerini temsil ederken, y-ekseni ilgili puanları göstermektedir. Sütunlar her bir veri seti için performansı temsil ederek kullanılabilirlik, bilişsel yük, estetik kalite ve arayüz tutarlılığındaki farklılıkları örneklemektedir. NASA-TLX (0–100, düşük olan daha iyidir), SUS (0–100, yüksek olan daha iyidir), AHS (1–7 Likert), SET (s, düşük olan daha iyidir) ve CSCR (0–1, yüksek olan daha iyidir). Bu şeklin daha büyük bir versiyonunu görüntülemek için lütfen buraya tıklayın.

Hipotezlerin istatistiksel doğrulanması

Önerilen hipotezleri (H1–H4) daha fazla doğrulamak için; yerleşim kalitesi, bilişsel yük, renk uyumu ve kullanılabilirlik ölçümleri dahil olmak üzere temel değerlendirme metrikleri üzerinde istatistiksel anlamlılık testi gerçekleştirilmiştir (Tablo 6). Sonuçlar ortalama ± standart sapma olarak raporlanmış ve istatistiksel anlamlılık, %95 güven aralığı ile eşleştirilmiş t-testleri (p < 0.05) kullanılarak değerlendirilmiştir. Sonuçlar, önerilen çerçevenin; hizalama doğruluğu, gruplandırma doğruluğu, okuma sırası, bilişsel yük (NASA-TLX) ve renk uyumu ölçümleri dahil olmak üzere birden fazla metriğe göre temel yaklaşımlara kıyasla istatistiksel olarak anlamlı iyileştirmeler sağladığını göstermektedir. Özellikle, bilişsel yükteki azalmalar ve kullanılabilirlik metriklerindeki iyileşmeler oldukça anlamlı farklar (p < 0.01) sergilemektedir. Bu bulgular, bilişsel tasarım ilkelerinin ve algısal renk modellemenin entegrasyonunun, kullanıcı arayüzü (UI) kalitesinde ölçülebilir ve istatistiksel olarak anlamlı iyileştirmelere yol açtığını onaylayarak H1–H4 hipotezlerini desteklemektedir.

Metrik	Temel Hat (Ortalama ± SD)	Önerilen (Ortalama ± SD)	İyileştirme (%)	p-değeri	Anlamlılık
Hizalama Hatası (↓)	7.8 ± 1.2	4.2 ± 0.9	46.10%	0.003	Anlamlı
Gruplandırma Doğruluğu (↑)	0.68 ± 0.05	0.82 ± 0.04	20.50%	0.001	Anlamlı
Okuma Sırası Doğruluğu (↑)	0.72 ± 0.06	0.87 ± 0.03	20.80%	0.002	Anlamlı
NASA-TLX (↓)	68.5 ± 5.4	47.2 ± 4.8	31.10%	0.0005	Yüksek Derecede Anlamlı
SUS Puanı (↑)	71.3 ± 6.2	88.9 ± 4.5	24.70%	0.0008	Yüksek Derecede Anlamlı
Renk Uyumu Endeksi (↑)	0.61 ± 0.07	0.83 ± 0.05	36.00%	0.001	Anlamlı
Kontrast Oranı (↑)	4.1 ± 0.6	6.2 ± 0.5	51.20%	0.002	Anlamlı

Tablo 6: Temel alınan ve önerilen yöntemler arasındaki performans metriklerinin istatistiksel karşılaştırması. Tablo; hizalama hatası, gruplandırma doğruluğu, okuma sırası doğruluğu, NASA Görev Yükü İndeksi (NASA-TLX), sistem kullanılabilirlik ölçeği (SUS), renk uyumu indeksi ve kontrast oranı dahil olmak üzere temel performans metrikleri için ortalama ve standart sapmayı (ortalama ± SD) sunmaktadır. Yüzdesel iyileştirmeler, p-değerleri ve istatistiksel anlamlılık seviyeleri raporlanmıştır. (↑) daha yüksek değerlerin daha iyi olduğunu, (↓) ise daha düşük değerlerin daha iyi olduğunu belirtir. İstatistiksel anlamlılık p < 0,05 düzeyinde değerlendirilmiştir.

Veri setine özgü gözlemler

Guo veri setindeki yapısal metriklerde gözlemlenen nispeten daha düşük performans, veri setinin doğal özelliklerine bağlanabilir. Guo veri seti, RICO ve ENRICO'dan daha küçüktür ve öncelikli olarak yapılandırılmış düzen açıklamalarından ziyade algısal renk özelliklerine odaklanmaktadır. Sonuç olarak; bileşen yerleşiminde daha yüksek değişkenlik, daha zayıf hiyerarşik organizasyon ve ekranlar arasında daha az tutarlı düzen yapıları sergilemektedir. Bu özellikler, yapısal öğrenmeyi ve düzen optimizasyonunu daha zorlu hale getirerek; algısal ve kullanıcı merkezli değerlendirmelerdeki güçlü performansa rağmen hizalama, gruplandırma ve okuma sırası metriklerindeki düşük performansı açıklamaktadır.

Ablasyon çalışması

Ablasyon çalışması, tekil bileşenler sistematik olarak çıkarılarak ve bunların yerleşim kalitesi, renk modellemesi ve tespit performansı üzerindeki etkileri analiz edilerek, önerilen çerçeve içindeki her bir modülün katkısını değerlendirir. Yerleşim kalitesi AE, GA, ROA ve LCS kullanılarak değerlendirilir. AE, UI öğelerinin konum sapmasını yansıtır; burada daha yüksek değerler, daha zayıf bir uzamsal yapıyı gösterir. GA, bileşenlerin Gestalt ilkelerine göre ne kadar etkili organize edildiğini değerlendirir. ROA, mantıksal görsel akışın korunmasını ölçerken, LCS hizalama, boşluklandırma ve yerleşim organizasyonu açısından ekranlar arası yapısal tutarlılığı nicelleştirir. Renk kalitesi bozulması, algısal tekdüzeliği, estetik tutarlılığı ve palet zenginliğini topluca değerlendiren ΔE (algısal renk farkı), CHI ve CDS kullanılarak değerlendirilir. Tespit performansı, Faster R-CNN modülünün daha basit bir tespit modeliyle değiştirilmesinin etkisini nicelleştiren mAP, kesinlik (precision) ve geri çağırım (recall) kullanılarak değerlendirilir. Bu metrikler birlikte, her bir modülün genel sistem performansına nasıl katkı sağladığına dair kapsamlı bir değerlendirme sunar.

Tablo 7, her bir modülün katkısını özetlemekte ve önerilen çerçeveyi mevcut UI oluşturma yaklaşımlarıyla karşılaştırmaktadır. Tam model; tüm yerleşim kalitesi, renk modelleme ve tespit metriklerinde en iyi performansı sergileyerek bilişsel tasarımın, algısal renk modellemenin ve derin görsel anlamanın sinerjik bir etkiye sahip olduğunu kanıtlamaktadır. Renk modelleme modülü çıkarıldığında, ΔE önemli ölçüde artarken, CHI ve CDS değerleri ciddi oranda azalmakta; bu durum algısal tekdüzeliğin ve renk uyumunun kaybolduğunu göstermektedir. Bu sonuç, estetik ve algısal kaliteyi korumada CAM02-UCS tabanlı modellemenin önemini doğrulamaktadır. Bilişsel yerleşim modülünün çıkarılması, AE değerinde belirgin bir artışa ve GA ile ROA değerlerinde kayda değer düşüşlere yol açmakta; bu da bilişsel tasarım ilkelerinin yapısal olarak tutarlı ve okunabilir yerleşimler üretmek için temel olduğunu kanıtlamaktadır. Çoklu ekran tutarlılığı modülünün kaldırılması LCS'de azalmaya neden olarak, birden fazla ekran arasında tutarlı yerleşim desenlerini korumadaki rolünü onaylamaktadır. Faster R-CNN dedektörünün daha basit bir CNN ile değiştirilmesi mAP, kesinlik (precision) ve duyarlılıkta (recall) keskin bir düşüşle sonuçlanmakta ve bu durum, genel işlem hattında sağlam bileşen tespitinin kritik önemini vurgulamaktadır. pix2code, REDRAW ve LDGM dahil olmak üzere temel yöntemlerle karşılaştırıldığında, önerilen çerçeve; yerleşim doğruluğu, görsel tutarlılık ve algısal renk kalitesi açısından tüm yaklaşımlardan tutarlı bir şekilde daha iyi performans göstermektedir.

Yöntem / Modül	AE ↓	GA ↑	ROA ↑	LCS ↑	ΔE ↓	CHI ↑	CDS ↑	mAP ↑
Renk Modülü Çıkarıldı	0.14	0.86	0.92	0.84	7.85	0.61	12.4	0.9
Bilişsel Düzen Modülü Çıkarıldı	0.18	0.72	0.73	0.69	4.21	0.79	17.9	0.89
Çoklu Ekran Tutarlılığı Çıkarıldı	0.17	0.81	0.88	0.62	4.18	0.81	17.3	0.9
Faster R-CNN, Basit CNN ile Değiştirildi	0.16	0.85	0.91	0.85	4.15	0.82	18.1	0.74
Pix2Code	0.25	0.61	0.65	0.51	10.2	0.48	9.6	0.65
REDRAW	0.21	0.66	0.72	0.56	8.7	0.52	11.4	0.72
LDGM (Layout Diffusion)	0.19	0.74	0.79	0.63	6.9	0.59	13.8	0.8
Önerilen Tam Model	0.12	0.89	0.94	0.87	4.12	0.83	18.7	0.91

Tablo 7: Önerilen çerçevenin ve temel yöntemlerin ablasyon çalışması ve karşılaştırmalı performans analizi.Tablo, önerilen tam modeli; belirli modüllerin çıkarıldığı varyantlarla (renk modülü, bilişsel düzen modülü, çok ekran tutarlılığı ve Faster R-CNN'in basit bir CNN ile değiştirilmesi) ve temel yöntemlerle (pix2code, REDRAW ve LDGM) karşılaştırarak bireysel bileşenlerin etkisini değerlendirmektedir. Performans; hizalama hatası (AE), gruplandırma doğruluğu (GA), okuma sırası doğruluğu (ROA), düzen tutarlılık puanı (LCS), algısal renk farkı (ΔE), renk uyumu indeksi (CHI), renk çeşitliliği puanı (CDS) ve ortalama ortalama hassasiyet (mAP) kullanılarak değerlendirilmiştir. (↑) yüksek değerlerin daha iyi olduğunu, (↓) ise düşük değerlerin daha iyi olduğunu belirtir.

VERİLERİN ERİŞİLEBİLİRLİĞİ:

Bu çalışmada kullanılan veri setlerine aşağıdaki bağlantılardan erişilebilir: RICO veri seti: https://interactionmining.org/rico; ENRICO veri seti: https://github.com/luileito/enrico; Guo’nun UI Renk Veri Seti: https://github.com/guozhongke/UI-Color-Dataset.

Ek Dosya 1. Matematiksel formülasyonlar ve genişletilmiş uygulama ayrıntıları. Bu dosya, önerilen otomatik kullanıcı arayüzü (UI) prototipleme çerçevesini destekleyen ayrıntılı matematiksel formülasyonları ve algoritmik iş akışlarını sunmaktadır. Dosya; bileşen algılama eğitimi, düzen deseni çıkarımı, renk uyumu modellemesi, birleşik UI prototipleme hedefi, Faster R-CNN algılama ayrıntıları, uzaysal mesafe ve hizalama benzerliği hesaplamaları, mantıksal UI ağacı oluşturma, CAM02-UCS tabanlı algısal renk modellemesi, bilişsel tasarım optimizasyonu, çoklu ekran tutarlılık modellemesi ve Algoritma S1–S3'ü içermektedir.Bu dosyayı indirmek için lütfen buraya tıklayın.

Tartışma

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Bulgular; kullanılabilirlik, yapısal organizasyon ve algısal kalitede istatistiksel olarak anlamlı iyileşmeler (p < 0.05) olduğunu göstermekte ve bilişsel tasarım ilkelerinin otomatik kullanıcı arayüzü (UI) prototiplemesine dahil edilmesinin etkinliğini doğrulamaktadır. Temel olarak görsel algılamaya veya kural tabanlı sezgisellere dayanan geleneksel UI oluşturma sistemlerinin aksine, önerilen çerçeve; tüm UI yeniden yapılandırma süreci boyunca Gestalt gruplandırmasını, hiyerarşi modellemesini, boşluk kısıtlamalarını ve algısal okunabilirliği entegre etmektedir. NASA-TLX, SUS ve SET'te gözlemlenen iyileşmeler, bilişsel iş yükünde istatistiksel olarak anlamlı bir azalmayı (NASA-TLX, p.< 0.01) daha da doğrulamaktadır. Bu sonuçlar, otomatik UI oluşturmanın yalnızca görsel yeniden yapılandırma doğruluğunun ötesine geçmesi ve pratik kullanılabilirlik sağlamak için insan merkezli tasarım bilgisini içermesi gerektiğini göstermektedir. Ayrıca, formüle edilen tüm hipotezler (H1–H4) deneysel sonuçlarla ampirik olarak desteklenmektedir.

Düzen iyileştirmelerinin ötesinde, CAM02-UCS tabanlı algısal renk modellemesinin entegrasyonu; ΔE, CHI, CDS ve kontrast oranındaki iyileştirmelerle yansıtıldığı üzere, renk uyumu, erişilebilirlik ve algısal kararlılıkta istatistiksel olarak anlamlı kazanımlar sağlar (p < 0.05). Öncelikli olarak renk optimizasyonuna odaklanan, otomatik görüntü tabanlı kullanıcı arayüzü (UI) renk teması oluşturma gibi önceki çalışmalara kıyasla, önerilen çerçeve hem renk hem de düzen iyileştirmesini birleşik bir işlem hattı içinde entegre eder. Ayrıca, çok ekranlı tutarlılık modülünün dahil edilmesi, yalnızca tek ekranlı UI oluşturmaya odaklanan önceki yaklaşımların temel bir kısıtlamasını giderir. pix2code³¹, REDRAW²³^,²⁴ ve LDGM³² dahil olmak üzere mevcut yöntemlerle yapılan bir karşılaştırma, bu yaklaşımların bilişsel ilkeleri, algısal renk uyumlandırmasını veya çok ekranlı akıl yürütmeyi dahil etmeden öncelikle yapısal yeniden yapılandırmaya veya üretici modellemeye vurgu yaptıklarını göstermektedir. Önerilen çerçeve, düzen doğruluğu metriklerinde (AE, GA ve ROA), algısal metriklerde (CHI ve ΔE) ve kullanılabilirlik ölçümlerinde (SUS ve CSCR) bu yöntemlere göre istatistiksel olarak anlamlı iyileştirmeler sergilemektedir (p < 0.05). Bu bulgular, bilişsel tasarım ilkelerinin, algısal renk modellemenin ve derin öğrenmenin birleşik bir sistem içinde birleştirilmesinin avantajını vurgulamaktadır.

Sonuçlardan elde edilen önemli bir gözlem, UX'i etkileyen yapısal ve algısal faktörler arasındaki ayrımdır. Yapısal optimizasyon, fonksiyonel doğruluğu ve düzen netliğini artırırken; algısal optimizasyon —özellikle renk uyumu— kullanıcı algısını ve bilişsel yükü önemli ölçüde etkilemektedir. Bulgular, optimal UI tasarımının yapısal doğruluk ile algısal tutarlılık arasında bir denge gerektirdiğini göstermektedir. Gösterilen iyileştirmelere rağmen, bazı sınırlamalar devam etmektedir. Örneğin, Guo UI Color veri seti gibi daha küçük ve algı odaklı veri setlerindeki performans, düzen organizasyonundaki değişkenlik ve sınırlı yapısal açıklamalar nedeniyle yapısal metriklerde daha düşüktür. Bu özellikler, tutarlı düzen modellerinin ve hiyerarşik ilişkilerin öğrenilmesinde zorluklar yaratmaktadır. Gelecekteki çalışmalar, bu tür veri setleri genelinde sağlamlığı artırmaya odaklanacaktır.

Teorik bir perspektiften bakıldığında, bu araştırma, bilişsel ve algısal ilkelerin doğrudan derin öğrenme iş akışlarına entegre edilmesiyle kullanıcı arayüzü (UI) üretiminin önemli ölçüde geliştirilebileceğini göstermektedir. Çalışma, UI üretiminin yalnızca bir bilgisayarlı görü veya kod üretme problemi olduğu yönündeki geleneksel görüşü sorgulamaktadır. Bunun yerine, algısal tek düzeliğin (CAM02-UCS aracılığıyla), bilişsel yükün azaltılmasının (Gestalt ilkeleri ve hiyerarşi modellemesi aracılığıyla) ve çoklu ekran tasarım tutarlılığının, otomatik UI sistemlerinin temel bileşenleri olarak dahil edilmesinin önemini vurgulamaktadır. Bu çalışma, UI üretiminin yalnızca yapısal doğruluğu değil, aynı zamanda psikolojik ve algısal faktörleri de hesaba kattığı, insan merkezli hesaplama modellerine doğru gerçekleşen geçişe katkıda bulunmaktadır. Bu haliyle, otomatik tasarım zekası için yeni bir teorik yön belirlemektedir.

Pratik bir bakış açısıyla, önerilen çerçeve; UI tasarımcıları, ürün ekipleri ve prototipleme araçları için uygulanabilir bir çözüm sunmaktadır. Bilişsel yükü azaltıp arama verimliliğini artırarak sistem, profesyonel tasarım standartlarını karşılamak için daha az manuel düzeltme gerektiren UI düzenleri oluşturur. Algısal olarak optimize edilmiş renk temalarının kullanımı, WCAG 2.1 gibi erişilebilirlik kılavuzlarına uyumu sağlayarak gerçek dünya uygulamalarında anında kullanılabilirliğe imkan tanır. Ayrıca, çoklu ekran tutarlılık modülü, manuel ayarlamalara gerek kalmadan tutarlı düzen ve tasarım kalıplarını koruyarak çok sayfalı uygulamaların daha hızlı geliştirilmesini kolaylaştırır. Genel olarak bu çerçeve, oluşturulan tasarımların hem kalitesini hem de kullanılabilirliğini artırırken UI geliştirme süresini önemli ölçüde azaltma potansiyeline sahiptir.

Önerilen çerçeve; bilişsel tasarım ilkelerini, algısal renk modellemesini (CAM02-UCS) ve çoklu ekran düzen tutarlılığını birleştirilmiş bir hesaplama hattına entegre ederek, otomatik kullanıcı arayüzü (UI) prototiplemesine insan merkezli bir yaklaşım getirmektedir. Öncelikle yapısal yeniden yapılandırmaya veya görsel algılamaya odaklanan önceki yaklaşımların aksine, bu çerçeve; Gestalt gruplandırmasını, hiyerarşiyi, kontrast optimizasyonunu ve algısal tekdüzeliği açıkça modeller. Deneysel sonuçlar; kullanılabilirlik (SUS ve NASA-TLX), görsel uyum (AHS, CHI ve ΔE) ve yapısal performans (GA, ROA, LCS ve mAP) alanlarında önemli iyileşmeler olduğunu göstermekte; bilişsel ve algısal modellemenin UI kalitesini ve kullanıcı deneyimini (UX) artırdığını doğrulamaktadır. Gelecekteki çalışmalar, semantik anlamayı ve yapısal akıl yürütmeyi geliştirmek için transformer tabanlı görme-dil modellerinin entegrasyonunu araştıracaktır. Ek olarak; uyarlanabilir kişiselleştirmenin, cihaz duyarlı düzenlerin ve insan denetimli (human-in-the-loop) iyileştirme süreçlerinin dahil edilmesi, sistemin pratik uygulanabilirliğini daha da artırabilir. Genel olarak bu çalışma, sadece görsel olarak doğru değil, aynı zamanda bilişsel olarak verimli, algısal olarak uyumlu ve pratik olarak konuşlandırılabilir olan yeni nesil yapay zeka destekli UI tasarım sistemleri için bir temel oluşturmaktadır.

Açıklamalar

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Yazarların herhangi bir çıkar çatışması yoktur.

Teşekkürler

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Yazarlar; bu araştırmanın tamamlanması sırasında Wuhan College of Foreign Languages & Foreign Affairs, Keimyung University ve Shanghai Institute of Commerce and Foreign Languages tarafından sağlanan akademik ve kurumsal desteği teşekkürle belirtirler.

Malzemeler

Bu makalede kullanılan malzemelerin listesi
Ad	Şirket	Katalog numarası	Yorumlar
CPU (İşlemci)	AMD Ryzen 9 7950X (16-core, 32-thread, 4.5–5.7 GHz)	Advanced Micro Devices (AMD), USA	Ryzen 9 7950X
CUDA Toolkit	Sürüm 11.8	NVIDIA Corporation, USA	CUDA Toolkit 11.8
cuDNN	Sürüm 8.9	NVIDIA Corporation, USA	cuDNN v8.9
Faster R-CNN	Nesne Algılama Modeli (Region Proposal Network ile)	Meta AI Research / Detectron2	Detectron2 framework
Matplotlib	Sürüm 3.7	Matplotlib Geliştirme Ekibi	v3.7.0
NVIDIA RTX 4090 GPU	24 GB GDDR6X Grafik Kartı	NVIDIA Corporation, Santa Clara, CA, USA	RTX 4090
NumPy	Sürüm 1.24	NumPy Geliştiricileri	v1.24.0
OpenCV	Sürüm 4.8	OpenCV Foundation	v4.8.0
PyTorch	Sürüm 2.0	PyTorch Foundation (Meta AI)	v2.0.0
FPN ile ResNet-50	Feature Pyramid Network ile Omurga CNN	Microsoft Research / Detectron2	ResNet-50-FPN
Scikit-learn	Sürüm 1.3	Scikit-learn Geliştiricileri	v1.3.0
SciPy	Sürüm 1.10	SciPy Topluluğu	v1.10.0
Sistem Belleği (RAM)	64 GB DDR5	Corsair / Kingston (veya eşdeğeri)	DDR5 64GB Kit
Ubuntu İşletim Sistemi	Sürüm 22.04 LTS	Canonical Ltd., UK	Ubuntu 22.04 LTS

Kaynaklar

$$\rightleftharpoonup{xx}$$ $$\longleftharp{xx}$$, $$\longrightharp{xx}$$,

Weingerl P. Automated image-based user interface color theme generation. Appl Sci. 2024;14:2850.
Feng Z, Fang J, Cai B, Zhang Y. Guis2Code: Computer vision tool to generate code automatically from graphical user interface sketches. In: Proc Int Conf Artif Neural Netw; 2021; p. 53–65.
Chen C, Zhang X, Yang Y, Li Y. GalleryDC: Design search knowledge discovery through auto-created GUI component gallery. Proc ACM Hum Comput Interact. 2019;3:1–22.
Chen J, et al. Object detection for graphical user interface: Old-fashioned deep learning combination. In: Proc ACM Eur Softw Eng Conf Symp Found Softw Eng; 2020; p. 1202–1214.
Xie M, et al. UIED: Hybrid tool for GUI element detection. In: Proc ACM Eur Softw Eng Conf Symp Found Softw Eng; 2020; p. 1655–1659.
Gijsenij A, et al. Determining key colors from a design perspective using dE-means color clustering. Color Res Appl. 2023;48:69–87.
Yuan LP, et al. InfoColorizer: Interactive recommendation of color palettes for infographics. IEEE Trans Vis Comput Graph. 2022;28:4252–4266.
Cao Y, et al. Influences of color salience and location of website links on user performance and affective experience. Int J Hum Comput Interact. 2021;37:547–559.
Liu W, Cao Y, Proctor RW. App icon color and border shape influence visual search efficiency and user experience. Int J Ind Ergon. 2021;84:103160.
Yamin PAR, Park J, Kim HK, Hussain M. Effects of button colour and background on augmented reality interfaces. Behav Inf Technol. 2023;43:663–676.
Deng L, Zhang ZR, Zhou FY, Liu RY. Effects of app icon border form and interface background color saturation. Adv Multimed. 2022;2022:1166656.
Weingerl P, Hladnik A, Javoršek D. Machine learning model for extracting image prominent colors. Color Res Appl. 2020;45:409–426.
Huang K, et al. WovenProbe: Probing possibilities for on-skin systems. In: Proc ACM Des Interact Syst Conf; 2021; p. 1193–1207.
Dewez D, Guillemot C, Bailly G, Isenberg T. Dual body representations during an isomorphic 3D manipulation. IEEE Trans Vis Comput Graph. 2022;28:2047–2057.
Kim J, Kim C, Nam KY. ThinkWrite: Design interventions for online petition deliberation. In: Proc CHI Conf Hum Factors Comput Syst Ext Abstr; 2022.
Gao L, Wang Y, Müller S, Hudson SE. DataLev: Mid-air data physicalisation using acoustic levitation. In: Proc CHI Conf Hum Factors Comput Syst; 2023; p. 1–14.
Khorsandi PM, Ogata M, Rekimoto J, Inami M. FabriCar: In-car media interactions using e-textile sensors. In: Proc ACM Des Interact Syst Conf; 2023; p. 764–776.
Zhang Z, Ding Y, Huang C. Automatic front-end code generation via multi-head attention. In: Proc Int Conf Comput Eng Appl; 2023; p. 869–872.
Jain V, et al. Sketch2code: Transformation of sketches to UI using deep neural network [preprint]. arXiv:1910.08930; 2019.
Chai Y, et al. Dynamic prototype network for few-shot malware detection. IEEE Trans Knowl Data Eng. 2023;35:4754–4766.
Qiu J, et al. AI security in 5G networks: Adversarial examples. IEEE Veh Technol Mag. 2020;15:95–100.
Qiu J, et al. Automatic concept extraction from big data in smart city. IEEE Trans Comput Soc Syst. 2020;7:225–233.
Xie M. UI2CODE: Computer vision-based reverse engineering of UI design [Internet]. GitHub; 2021. Available from: https://github.com
Wang C, Bochkovskiy A, Liao HYM. CSPNet: Backbone enhancing learning capability of CNNs. In: Proc IEEE Conf Comput Vis Pattern Recognit Workshops; 2020; p. 1571–1580.
Hui M, et al. Unifying layout generation with decoupled diffusion model. In: Proc IEEE Conf Comput Vis Pattern Recognit; 2023; p. 18434–18443.
Wang Y, et al. Dolfin: Diffusion layout transformers without autoencoder. In: Proc Eur Conf Comput Vis; 2024; p. 513–530.
Sobolevsky A, et al. GuiLGet: GUI layout generation with transformer [preprint]. arXiv:2304.09012; 2023.
Lu Y, et al. UI layout generation with LLMs guided by UI grammar [preprint]. arXiv:2310.15455; 2023.
Leiva LA, Hota A, Oulasvirta A. ENRICO: A dataset for mobile UI design modeling. In: Proc Int Conf Hum Comput Interact Mobile Devices Serv; 2020.
Li G, et al. Learning to denoise mobile UI layouts. In: Proc CHI Conf Hum Factors Comput Syst; 2022; p. 1–15.
Beltramelli T. pix2code: Generating code from a GUI screenshot. In: Proc ACM SIGCHI Symp Eng Interact Comput Syst; 2018.
Zheng G, et al. LayoutDiffusion: Controllable diffusion model. In: Proc IEEE Conf Comput Vis Pattern Recognit; 2023; p. 18424–18433.

Yeniden basım ve izinler

Bu JoVE makalesinin metnini veya şekillerini yeniden kullanmak için izin iste

İzin iste

Etiketler

Engineering All Prototyping Cognitive and Visual Design User Interfaces color modelling component detection

Kullanılabilirliği ve Düzen Netliğini Artırmak İçin Bilişsel ve Görsel Tasarım İlkelerini Entegre Eden Otomatik Kullanıcı Arayüzü Prototipleme Çerçevesi

Bu makalede

Özet

Özet

Giriş

Protokol

Sonuçlar

Tartışma

Açıklamalar

Teşekkürler

Malzemeler

Kaynaklar

Yeniden basım ve izinler

Etiketler

İlgili makaleler