Windows 8 Hileleri #4 : Görünüm Moduna göre uygulama geliştirme

Windows 8 kullananlar iyi bilirler.Bir Windows 8 uygulamasını kenarda çalıştırırken ana ekranda farklı bir iş yapabilirler:

ekran

Uygulamaların köşelerde açılmasına İngilizce tabirle “Snapped View” demekteyiz.Siz de uygulamalarınızı geliştirirken,Snapped View desteği sağlamalısınız ki zaten Marketplace kurallarından biridir aynı zamanda.

Peki uygulamanın farklı görünümlere geçip geçmediğini nasıl anlarsınız?

Çok Kolay! Page_SizeChanged olayı sayesinde görünümleri yakalayabiliriz.

Örnek olarak projemize ayrıca bir sayfa eklediğimizi düşünelim.Amacımız görünümleri 2 farklı sayfaya bölerek; Tam Ekran görünümde varsayılan anasayfamız hangisiyse(MainPage) ve Snapped Görünümde’de farklı bir sayfanın(SnappedPage) görüntülenmesini sağlamaktır.

Ardından bir adet SnappedPage’e geri dönüş kodu ekleyelim ki Snapped görünümden vazgeçersek anasayfaya yönlenelim:

public void Getback()
{
  var rootFrame = new Frame();
     rootFrame.Navigate(typeof(MainPage));
Window.Current.Content = rootFrame;
Window.Current.Activate();
}
Ve son olarak MainPage.xaml’in en üst elementi olan Page’e girip Page_SizeChanged olayına bu günlük yazımızın hilesine ait kodları girin:

private void Page_SizeChanged_1(object sender, SizeChangedEventArgs e)
{

   ApplicationViewState myViewState = ApplicationView.Value;

if (myViewState == ApplicationViewState.Snapped)
 {
var rootFrame = new Frame();
   rootFrame.Navigate(typeof(SnappedPage));
Window.Current.Content = rootFrame;
Window.Current.Activate();
} 
}

Tabi benzer bir yapıyı SnappedPage’de de uygulamanız gerekebilir.Onun da kodu benzer şekilde olacaktır:

private void Page_SizeChanged_1(object sender, Windows.UI.Xaml.SizeChangedEventArgs e)
{
ApplicationViewState myViewState = ApplicationView.Value;

if (myViewState != ApplicationViewState.Snapped)
{
Getback();
}

}

Eğer tam ekran görünüm değişirse,SnappedPage’e yönlendirerek farklı bir sayfada görünüme yönelik ekran tasarlayacağımızı bildiriyoruz.Bu kodu kullanarak farklı görünümleri de destekleyecek uygulamaları geliştirebilirsiniz.

Bu aynı zamanda bir Marketplace kuralı olduğundan ötürü de bu yazıyı “Problem ve Çözümü” olarak kategorilemek  mümkündür.

Advertisements

Windows 8 Hileleri #3 : Navigasyon

Uygulamanızdan farklı sayfalara geçiş yapmak istiyorsunuz diyelim.Windows Phone’da NavigationService’i kullanırken,Windows 8 Uygulamalarınızda durum değişiktir.Çünkü Sayfalara(Page) değil de Frame’lere navigasyon uygulayabilirsiniz.

Bu durumu biraz özetleyelim.Frame’ler aslında Page yapısına bağlı readonly özelliklerdir.Navigasyon işlemleri Frame’ler vasıtasıyla yapılır ve aslında Navigasyon yaparken sayfayı değil o sayfalara ait Frame’leri çağırmaktasınızdır.

Örneğin;

var
rootFrame = new Frame();
rootFrame.Navigate(typeof(MainPage));
Window.Current.Content = rootFrame;
Window.Current.Activate();

tarzında yazacağımız bir kod’da,yeni bir frame nesnesi oluşturup MainPage’in Frame değerine navigasyon sağlıyor ve Windows 8 uygulamasından oluşturduğumuz frame nesnesini ve dolayısıyla da MainPage’i görüntülemiş oluyoruz.Ardından Activate methoduyla aktif hale getirerek, ekranın Content değerine atanan frame’i göstermesini belirtmiş oluyoruz.

Windows 8 Hileleri #2 : FlipView ile Tab Yapısı Oluşturma

Herkesin kullanmaya alışkın olduğu yapılardan biri de Tab(Sekme)’dir.Belirli sekmelere tıklayarak içeriklere erişiriz.

Windows Phone’a uygulama geliştirirken Pivot kontrolü bunu kısmen gerçekleştirir ancak Windows 8 uygulamalarında Pivot diye bir kontrolümüz bulunmamaktadır.

Ancak hazır gelen panel kontrollerini bu amaç için kullanabiliriz: “FlipView” kontrolü gibi!

FlipView kontrolü; Gesture Manipulation(Dokunmatik aksiyonlar almamıza sağlar) yaparak Sekme yapısına uygun bir şekilde içerik saklamaya olanak sağlayan bir mekanizmaya sahiptir.

Image

Projemize; 3 button ve 1 Adet FlipView ekleyelim.FlipView’ın da 3 adet FlipViewItem’ı bulunsun:

XAML Kodu:

<FlipView Name=”flv1″ HorizontalAlignment=”Left” Margin=”120,187,0,0″ VerticalAlignment=”Top” Width=”386″ Height=”390″>

 <FlipViewItem>
  <TextBlock Text=”1 numaralı Sekme” FontSize=”24″/>
 </FlipViewItem>

 <FlipViewItem>
<TextBlock Text=”2 numaralı Sekme” FontSize=”24″/>
</FlipViewItem>

<FlipViewItem>
<TextBlock Text=”3 numaralı Sekme” FontSize=”24″/>
</FlipViewItem>
</FlipView>

<Button Name=”btn1″ Content=”1″ HorizontalAlignment=”Left” Margin=”120,144,0,0″ VerticalAlignment=”Top”/>
<Button Name=”btn2″ Content=”2″ HorizontalAlignment=”Left” Margin=”165,144,0,0″ VerticalAlignment=”Top”/>
<Button Name=”btn3″ Content=”3″ HorizontalAlignment=”Left” Margin=”213,144,0,0″ VerticalAlignment=”Top”/>

Her bir FlipViewItem ekleniş sırasına göre isimlendirilir.İlk eklenen ve “1 numaralı Sekme” yazan FlipViewItem nesnemiz daima “0” sırasını alır.Sonrakiler de birer birer artarak ilerler.

Şimdi her bir Button’a tıklandığında ilgili FlipViewItem’a gidecek kodları yazalım.Bunu yazarken FlipView’ın SelectedIndex’inden faydalanıyor olacağız.

Öneri: Her Button’un altına girip de kod yazmayın aman! Sonra proflar size “Button Altı Programcı” diye çatıverir 🙂

Bu yüzden Page_Load olayına aşağıdaki gibi Lambda Expression uygulayarak kendinizi proflardan gelecek zararlı ışınlara karşı koruyabilirsiniz:

private void Page_Loaded_1(object sender, RoutedEventArgs e)
{
btn1.Click += (c, d) => { flv1.SelectedIndex = 0; };
btn2.Click += (c, d) => { flv1.SelectedIndex = 1; };
btn3.Click += (c, d) => { flv1.SelectedIndex = 2; };
}

Button altına girip kod yazma ile bu yöntem birbirinin aynısıdır.

Projemizi çalıştırdığımızda sekme yapısını uygulamış oluruz.

 

ss

Windows 8 Hileleri #1 : Tema Değiştirme

Windows 8 Geliştirme yaparken Device penceresinden Light Tema’yı seçersek,Light Tema’ya göre çalışacak ekran tasarlayacağımızı belirtmiş oluruz.

Ancak uygulamamızı çalıştırdığımız vakit,varsayılan(Dark Tema) aktif hale gelecektir.Bunu önlemenin en rahat yolu.App.xaml.cs veya App.xaml.vb’de aşağıdaki kod satırını eklemek olacaktır:

public App()
{
  this.InitializeComponent();
 
this.Suspending += OnSuspending;

 //Light Tema’ya göre tasarım yapıyorsanız
  
this.RequestedTheme = ApplicationTheme.Light;

  //Dark Tema’ya göre tasarım yapıyorsanız
   
this.RequestedTheme = ApplicationTheme.Dark;

}

32 Günde Windows Phone #1 : Kullanıcı Deneyimi Prensipleri

FİKİR

Aklınıza şahane bir Mobil Uygulama fikri geldi.ve bunu gerçekleştirmek için araştırmalarınıza başladınız.

Microsoft’un sitesinden Windows Phone 8.0 SDK‘yı bilgisayarınıza kurdunuz.Visual Studio 2012’yi açtınız ve kod yazmak istiyorsunuz : Yapacağınız ilk yanlış bu olacaktır.

Çoğu geliştirici tam da bu noktada Windows Phone uygulama geliştirmeye veda etmiş veya soğumuştur.Merak etmeyin ben size Windows Phone uygulama geliştirmeyi sevdireceğim 🙂

Mobil Uygulama geliştirme dışardan bakıldığında her ne kadar bir fikir bulsam gerisini yaparım gibi gözükse de öyle değil! Bu işin Analizi,UX,Marketing,Sosyal Medyası,Geliştirmesi,Bakım ve Onarımı,Tasarımı,Dökümantasyonu…var oğlu var.Sadece fikir ve kodlama becerileri başarılı ve kaliteli bir uygulama için yeterli olmayacaktır.Mobil uygulama geliştirmeyi bir ürün olarak düşünmelisiniz.Bir kere yazayım bırakayım derseniz,başarılı olamazsınız.Çünkü müşteri diye tabir ettiğimiz kullanıcılarımız bizlerden sürekli yeni özellikler,tasarımlar,kolaylıklar beklemektedirler.Kullanıcıların uygulamamızı 1-2 kere kullandıktan sonra silmesini değil aksine sürekli kullanmasını sağlamamız gerekmektedir.İşte bunu gerçekleştirmek için uygulama geliştiricisine çok iş düşer.Eğer kurumsal bir firma değilseniz,bunların hepsini veya birkaçını tek başınıza yapıyor olacaksınızdır.Bu gözünüzü korkutmasın.”Angry Birds” ün ROVIO firmasının 36.uygulaması olduğunu söylesem ve bu uygulama sayesinde büyük bir şan,şöhret ve finans desteğine kavuştuğunu da belirtsem,bu işlerin kolay olmadığını ama özverili ve sakin bir şekilde amaçlarımıza ulaşabileceğimizi öğrenmiş olmaz mıyız?

Bu eminim size büyük bir motivasyon kaynağı olacaktır 🙂

ANALİZ

Hedefimiz Windows Phone üzerinde uygulama geliştirmek olduğuna göre,Analiz safhasını es geçebiliriz.

Ancak, kısaca bilgi vermek gerekirse,Analiz kısmında;

– Uygulamayı kimler kullanacak?
– Uygulamayı neden geliştiriyoruz? Bir sorun mu çözüyor yoksa varolan bir ürüne göre daha iyi özellikleri mi var?
– Uygulama paralı olacaksa,kullanıcılar neden satın alsınlar ki? Satın almalarını gerektirecek bir çözüm mü sunuyorsun?
– Uygulama hangi platformlarda çalışacak?

gibi soruları kendimize sorarak beyin fırtınası yaparız.Bu aşamaya kısaca Analiz deriz.

Analiz safhasından kısaca söz ettiğimize göre,şimdi gelelim Kullanıcı Deneyimine!

KULLANICI DENEYİMİ

Kullanıcı Deneyimi ifadesi aslında kısaca; bir kullanıcının,bir ürünü/ürün grubunu kullanırken edindiği memnuniyeti/memnuniyetsizliği ifade eden bir terimdir.Apple’dan Don Norman tarafından ortaya atılmış ve günümüzde özellikle de Mobil Uygulama ve Web Siteleri değerlendirilirken sıklıkla kullanılan bir kavramdır.Bu terim hakkında ayrıntılı bilgi isteyenler,referans aldığım bu siteyi inceleyebilirler: Kullan.org – Kullanıcı Deneyimi Tasarımı Nedir?

Peki Windows Phone tarafında bizi Kullanıcı Deneyimi olarak ne bekliyor? Ve kaliteli bir kullanıcı deneyimi için ne yapmalıyız? gibi sorularınızı duyar gibi oldum.

O halde kaldığımız yerden devam edelim:

Windows Phone Kullanıcı Deneyimi Prensipleri

Microsoft,mobil platformundaki her ürünü için rehber niteliğinde yardımcı kaynaklar sunmuştur.Windows 8 uygulama geliştiricileri için de Windows Phone geliştiricileri için de rehberleri mevcuttur.

Windows Phone 7 ilk çıktığında da,Microsoft Windows Phone Kullanıcı Deneyimi Prensipleri ilgili bir WhitePaper yayınladı.Ancak Windows Phone 8 çıkınca MSDN referanslarında bunu göremez olduk 🙂 Bknz: MSDN’deki Eski Windows Phone Kullanıcı Deneyimi Prensipleri Sayfası

Zaten eski prensipler rehberi baya uzun bir rehber idi.Bitirmem için 1-2 gün geçmesi gerekiyordu.Şaka tabi ki 🙂 Ama baya kapsamlı bir dökümandı.Eğer talep olursa arşivlerden çıkarıp sizinle paylaşabilirim.

Her neyse! Microsoft,eskisini yayından kaldırınca Kullanıcı Deneyimi Prensiplerini bu sitede toparladı.Eskisi kadar kapsamlı değil belki ama anlaşılır bir şekilde hazırlanmış.

Şimdi gelelim bu sitede yazılanları açıklamaya:

Öneri 1: Uygulamanızı her kullandığınızda gurur duyacak bir kullanıcı deneyimi tasarlayın.

Bu demek oluyor ki; uygulamanız anlaşılır,akıcı ve renk uyumu açısından tutarlı olmalıdır.Tasarımsal olarak nesnelerinizi yerleştirirken bile bunu gözardı etmemeniz gerekir.Öyle ki bu önergeye göre; Grid adı verilen ızgara yöntemini kullanarak nesnelerimizi yerleştirmemiz gerektiğidir.

Örnek resimlere bakacak olursak;

Image  Image

Bu resimlerde her bir nesnenin belirli ebatlarda ve boşluklarda uygulama içerisine eklendiğini göreceksinizdir.Izgara yöntemi size tasarımsal açıdan böyle bir kolaylığı sağlayarak,göze hitap eden tasarımlar geliştirmenize olanak sağlayacaktır.

Diğer bir belirtmemiz gereken ise tasarımın belirli bir sıraya ve yazı düzenine göre ilerlemesi gerektiğidir.Örneğin:

Hierarchy_1   Hierarchy_2

Soldaki tasarımda belirli bir sıralama ve göze hitap eden bir font ile kullanıcı etkileşimi sonucu ortaya çıkan yeni yazı rengi tam ideal bir Kullanıcı Deneyimi Prensibidir.Ve uygulanması önerilir.Öteki taraftan Windows Phone 7 standart şablonlarından Pivot App’de ise,ne olduğu belirsiz sadece bir listenin ekrana uygulandığı gözlemlenmektedir.

Bir geliştirici olarak bakıldığında herhangi bir sorun yok gibi duruyor.Ama gelin bunu kullanıcıya gösterin bakalım.Ne diyecektir kim bilir? 🙂

Zaten yukarıda da belirttiğim üzere,göze hitap eden bir font seçimi yapmanız gerekir.Fontlar uygulamalarınızın karakteri olacaktır bunu unutmayın!

Örnek tasarım ekranları mı görmek istiyorsunuz?

Type_1   Type_2

Öneri 2: Az içerik ile çok iş yapın!

Windows Mobile işletim sistemi olanlar iyi bilirler.Gözü yoran ve seçilen elemana göre arka plan atayan bir tasarım uygulanmıştı.Windows Phone ile itibaren dediler ki,buna artık gerek yok.Ekranda çizgi,arka plan rengi olmasa bile belirli prensipleri uygulayarak az içerik ile birçok işlemin yapılmasını sağlayabiliriz.

Örnek olarak 2 resim göstereceğim.

Chrome_2   Chrome_1

1.resimde görülen eski Windows Mobile işletim sistemindeki Outlook uygulamasıdır.Ve içerik yerine pencereleri,diğer işlevselleri ve arka plan renklerini ön plana çıkarmıştır.Bu bizim uygulamamız gereken Tasarım prensibimize aykırıdır.Çünkü yeni Kullanıcı Deneyimine göre artık içerik önemlidir.Boş bir ekran olsa bile içerik güzel,anlaşılır bir şekide gösterilirse bu prensibe uymuş sayılırız.Nitekim; 2.resimde tek renkli bir arka plan ve liste elemanlarının tıklanma sonrası oluşacak etkileşimine tanıklık etmektesiniz.Burada sade bir tasarım yapılarak aslında içerik önplana çıkartılmıştır.Eğer uygulamanızda içerik önemli değilse,bunu uygulamak zorunda değilsiniz ki zaten zorunluluk diye bir olay yok.Sizin paşa gönlünüz nasıl isterse öyle tasarlayın ekranlarınızı 🙂

Öneri 3: Uygulamanız hızlı olmalı ve kullanıcı etkileşimine cevap verebilmelidir.

32 günde Windows Phone serimizin amaçlarından biri de uygulamaların kullanıcı etkileşimine cevap verebilecek hızlı yapılar kullanmasına yardımcı olmaktır.Bu sebeple ilerleyen bölümlerimizde de göreceğiniz üzere,Canlı Kutucuklar(Live Tiles) ve Panorama kontrolü ile tanışacaksınız.Live Tiles kullanıcıya etkileşime girmesi için fırsat sunarak uygulamaların kullanılırlığını artırırken,Panorama uygulamanızda hızlı bir navigasyon işlemi sağlamaktadır.

Örnekler ile açıklamamız gerekirse;

Alive_1  Alive_2

Resimde de görüldüğü üzere kutucuklarımızdan birisi bize “Tıkla bana!” dedirten cinsten 🙂 İnsan doğası gereği hareketli nesneleri ilginç bulur ve merak ederiz.Windows Phone tasarımında da bu önemli fikri uygulamaları hoş olmuş.Şahsen her canlı kutucuk gördüğümde tıklayasım geliyor 🙂 Merak işte…

Diğer bir önergemiz de Hızlı çalışmasıydı değil miydi?

Sayfa sayfa ayırıp navigasyon sağlamak yerine,tek bir sayfa üzerinde hızlı bir şekilde navigasyon sağlasak nasıl olurdu? Resimdeki gibi!

motionKeyframes

Uygulamayı kullanan bir kullanıcı bilinçli bir şekilde sayfayı sola-sağa kaydırmak isteyecektir.Böylelikle birden fazla sayfa oluşturma yükünden sizi kurtaracaktır 🙂 Burada da güzel bir şekilde kulanıcı etkileşimine cevap veren hızlı bir yapı görmüş olduk.

Öneri 4: Kullanılan resimlerin bilgi de içermesi gerekmektedir(Tile Notification – daha sonra değinilecek) bir Infografik yaklaşımıdır.

Info_1   Info_2

Yeni nesil Windows Phone uygulammalarına yönelik tasarlanan simgelere göz attığımızda 1.resim tüm oyları alacaktır.Ancak eskiden bir uygulamanın nasıl olduğunu – ki eminim herkes biliyordur,sabit simgeler kullanılmaktadır.(Icongrafik) 2.resimde bu şekildedir.Farkları: 1.resimde içeriği önplana çıkartırken,2.resimde simge önplandadır ve bilgi yoktur.

İşte 2.resimdeki yöntemin Windows Phone Kullanıcı Deneyiminde göze hitap eden bir yer edinmesi mümkün değildir.Kimse favori uygulaması ve bildirim almadıkça sabit bir uygulamayı açmayabilir.İşte bu prensip bu durumu ortadan kaldırmaya yönelik geliştiriciye sunulmuş bir fırsattır.Arada sırada Bildirimlerde bulunarak kullanıcıyı canlı tutun!

Öneri 5: Her yerde aynı Kullanıcı Deneyimi

Uygulamanızı tasarladınız.Ama kullanıcılar bunun Windows 8,iPhone/iPad ve Android versiyonlarını da bekliyorlar.Aynı kullanıcı deneyimini tüm platformlarda uygulamanız lazım ki kullanıcının kafası karışmasın.Örneğin:

Win_1

Her nerede olursak olalım,ister ofiste iPhone/iPad,iOS cihazımız,ister evde Windows 8 cihazımız isterse de seyahata giderken Windows Phone 8’imiz olsun,uygulamamız her yerde aynı Kullanıcı Deneyimini sağlamak zorundadır.Aksi takdirde tekerliği yeniden icat etmiş oluruz.

Biz bu noktada her ne kadar genel konuşmuş olsak ta, Windows Phone 8 ve Windows 8 uygulamaları geliştirirken aynı Kullanıcı Deneyimini uygulamaya özen göstermelisiniz.

SONUÇ

Kullanıcı Deneyimi o kadar mühim bir kavram haline dönüştü ki hakkında kitaplar yazıldı,siteler açıldı.Başlı başına bir alan oldu.Windows Phone uygulamaları tasarlarken bahsettiğimiz bu noktalar üzerinde durmanızı tavsiye ediyorum.

Bu yazımla ilgili düşünceleriniz varsa dinlemek isterim.

Teşekkürler!

Not : Bir sonraki yazımızda,Windows Phone’da önemli yer teşkil eden “Layout-Aware Themes” e ayıracağız!

Günün Sözü #1

“Windows Phone Uygulama Geliştirme,Windows 8’e nazaran daha kolaydır” – İbrahim Ersoy