User Interface

Go down

User Interface

Post  Roy on Fri Apr 17, 2009 5:25 pm

Två förslag. Inget emot Hogges förslag men det är alltid bra med lite fler att välja från och testa olika saker.

Simpelt ui som tar upp ett hörn. Har man inget item på sig så är det tomt där och ingen text. Texterna beskriver antingen vad man har plockat upp (om det inte är för krångligt antar jag!) eller vad man kan göra på platsen.


En annan version lite mer mot Hogges. Den tar upp lite mindre plats då den inte har någon bakgrund för objekten eller knappen.



En tanke är att använda något mönster på bakgrunden beroende på vad det är för docka, dvs deras personliga mönster på ramen (om det inte är för krångligt att göra). Annars något universalt mönster så det ser lite finare ut.

Roy

Posts : 51
Join date : 2009-03-11

View user profile

Back to top Go down

Re: User Interface

Post  Roy on Mon Apr 20, 2009 11:54 am

Två till. Lite mer tanke bakom dem kanske.

Först ut har vi en där man ser alla dockor som man har. De är samlade nere i vänster hörn och den man spelar med sticker upp en bit vilket gör att man ser det tydligt och vilken det är i storleksordningen.




Nästa går en bit längre ändå. Samma koncept fast nu delar vi upp dockorna över skärmen lite. De som är ute på banan ligger till höger medan den du spelar är längst till vänster och sedan så har du alla dockor som är inne i spelarens docka som en liten grupp väldigt nära denna. På så vis kan du se vilka du har med dig, vilka dockor du har och storleksordningen på dem (inte lika tydligt som i den förra dock!).


Roy

Posts : 51
Join date : 2009-03-11

View user profile

Back to top Go down

Re: User Interface

Post  Roy on Tue Apr 21, 2009 3:17 pm

Då jag inte återkommer till skolan idag efter lunchen pga huvudvärk och att jag inte känner mig helt bra så postar jag vad jag kom fram till under förmiddagen.

Pratade lite med Hogge om att man ska kunna se vad alla babushkorna har i sitt "inventory" så att man vet vem som har plockat upp ett föremål. Hans förslag finns i en annan tråd någonstans men det har ingen direkt lösning så att man ser vilka babushkor som är "grupperade". Detta är mitt då där jag löst det problemet och man ser vem som har föremål på sig.

Man utgår från det övre vänstrahörnet och sedan placeras babushkorna som på bilden nedan här.




Om man sedan fortsätter sitt äventyr så kommer man att vilja plocka upp de andra dockorna också i någon större vilket gör att man måste markera på något vis vem som har vem i sig. Detta har jag då gjort genom att placera de upp-plockade dockorna lite snett nedanför åt höger. På så vis får man snabbt översikt över vem som har plockat upp vem/vilka. Man kan även placera föremål där istället för babushkornas ansikten om de har plockat upp något sådant.




Något som Fredrik tog upp under vår workshop när vi visade de andra som finns postade i tråden här är att det bör finnas en bakgrund för allt detta. Detta kan ju ställa till lite problem dock eftersom UI:et kan använda sig över en lite större yta som inte alltid används. Nu är det så att jag är en person som gillar minimalistiska UI:n så de ska ju helst ta så lite som möjligt av spelfältet för spelaren. OM det nu ska vara en bakgrund så kan man tänka sig formen på den ungefär som en gardin som hänger ned och är bunden till vänster om man vill optimera ytan. Själv ser jag dock ingen direkt mening med då det tar så mycket plats. Istället skulle jag hellre se att man ger alla dockornas ansikten en ram med deras eget mönster istället (detta blir dock väldigt pilligt att göra, alternativt har de bara sin färgs ram vilket är ungefär vad de redan har i dessa bilder). Att göra en fyrkant eller fyrkant med rundat hörn som bakgrund kommer att täcka lite väl mycket av skärmen tror jag och då är det nog bättre att placera allting i nedre kanten istället så det inte täcker spelyta på samma vis (vilket i sin tur problematiserar grupperingar och antagligen programmerarns del av detta).

Notera nedan hur mycket det sticker ut åt höger jämfört med ogrupperade vilket då blir tomt område på ramen/bakgrunden när man har dockorna mer utspridda.




Om det ska vara en bakgrund så backar jag gärna av och låter någon annan göra den. Ringar runt dockornas ansikten kan jag försöka mig på dock om vi tar konceptet vidare. Ni kanske har noterat i bilderna att den dockan man styr har en form av ljus bakom sig så att det framgår direkt. Det är denna som kommer flyttas runt mellan dockorna när man byter karaktär då. En del tankekraft är också lagd på att göra det så enkelt som möjligt för programmerarna att kunna utföra layouten utan förmycket trassel och då är den senaste här nog lättast att göra.

Vi ska även ha någon bakgrund för dialogtexten(?). Denna kan ju stämma överrens med den eventuella bakgrunden på dockornas del av interfacet. Några direkta idéer för detta har jag icke och jag är inte så jättebäst på att rita sånt.

Det var väl det. Nu är det upp till er lite att bestämma vilken vi ska använda oss av eller om jag ska fortsätta skissa fram fler förslag. Dock vill jag ha konstruktiv kritik om det inte duger så att jag har något att gå på. Inte lätt att veta vad man gjort rätt/fel om ingen berättar det för en Smile

// Roy

Roy

Posts : 51
Join date : 2009-03-11

View user profile

Back to top Go down

Re: User Interface

Post  Hogge on Tue Apr 21, 2009 3:51 pm

Roy wrote:

Börjar likna något. Saknas en contex-sensitive-knapp, sen vet jag inte om det kommer vara tydligt nog när man spelar. Sen, om man har alla Babushkor i ett känns det som att det alternativet kommer sticka ut halvvägs ut på skärmen.

Men definitivt ett bra alternativ.
avatar
Hogge
Admin

Posts : 121
Join date : 2009-03-10
Age : 31

View user profile http://babushka.forumotion.net

Back to top Go down

Re: User Interface

Post  louisestigell on Tue Apr 21, 2009 4:16 pm

Bra jobbat, Roy. Gillar absolut den grafiska utformningen på det hela. Håller dock med Hogge om att raddan med babushkor skulle sticka ut långt in i skärmen om man hade alla babushkor i en. Skulle man inte kunna behålla det som det är men placera raden horisontellt på botten av skärmen istället?
En snygg contextknapp på det så är det skitsnyggt tycker jag. ^_^
avatar
louisestigell

Posts : 126
Join date : 2009-03-10

View user profile

Back to top Go down

Re: User Interface

Post  Roy on Tue Apr 21, 2009 6:45 pm

Meneeee... det är ju därför jag har med så många bilder. Det är ju en som visar när alla är med i en docka redan. Så länge man inte har någon bakgrund för hela layouten så är det ingen fara i min mening.

Detta med att lägga det längst ned på skärmen som i de andra förslagen tror jag är MYCKET mer pill för programmerare då man inte kan... hrrm. Svårt att förklara. Ska göra ett försök senare.

Kontext knappen är utelämnad för jag har fokuserat på just grupperingar och dockorna just nu även om alla gillar att påpeka det ;>

Roy

Posts : 51
Join date : 2009-03-11

View user profile

Back to top Go down

Re: User Interface

Post  Udrian on Tue Apr 21, 2009 8:05 pm

hmm jag gillade den där sista idéen faktiskt
avatar
Udrian

Posts : 39
Join date : 2009-03-10
Age : 31

View user profile

Back to top Go down

Re: User Interface

Post  Roy on Wed Apr 22, 2009 1:43 am

För att beskriva problem angående programmering vad jag kan tänka mig iaf. Notera att jag INTE programmerat något sedan gymnasiet och då gjorde jag ett 21 spel med lite bonus finesser som jag lade till utöver kursen och lite hobby mirc scripts hemma ; )

Fördelen med att ha figurerna på vänster sida är att man kan stapla dem hur långt som helst antingen åt höger eller snett ned åt höger. Så långt är ni nog med mig.

Om vi istället byter position till nedre delen av skärmen så kommer det uppstå problem med att ha plats för figurerna om man inte vill programmera massa "kul" omvägar. Notera i bild 1 här då vi har alla utplacerade som att de är ensamma.


Här fungerar allting utmärkt, inga problem. Varje figur har var sitt område. Yes, skitbra!
Nu parar spelaren ihop lite dockor... okej... så vi gruppar dem.


Öööh... vad hände nu? Vi satte in figur grön, blå, orange och rosa i figur svart. Fan... vart tog röd vägen? Jo, röd har position bredvid svart och därför försvann den bakom de andra med denna lösningen. Hupp... inte så bra. Alternativt så måste man positionera den svarta högre upp och sedan ha 3 rader (svart inräknad) på höjden... okej... visst men ska det se snyggt ut så måste svart positioneras om då det kommer fler än 3 dockor i den. Är ni med mig?

Nåväl... detta kan jag tänka mig händer då man programmerar med positioner och då kanske man ska lägga ut olika positioner som figurerna kan ta. Såhär...

Nu återgår jag dock till mitt senaste UI. Röd är en bas-position. Denna kan ha barn under sig (skum rosa färg). Barnet kan sedan ha ett barn (rosa) osv till man har fullt ut för alla figurer som ska kunna finnas i. Dvs, första figuren kan ha 6 barn, andra kan ha 5 osv. Varje basposition har alltså ett visst antal barn-platser som kan fyllas upp allt eftersom.


Om man sedan sprider ut det på nedre delen av skärmen så kommer det bli såhär...
->
När fler figurer kommer in i den första figuren om alternativ 1, man inte flyttar den näst första figuren mer till höger (vilket ger en långsammare överblick över var figurerna är då man blandar ordningen (egentligen bara figurens position) i interfacet) eller att man som på bilden här byter position på den röda figurens bas då X antal figurer är inne i den.

Nu känns det bara som att jag rabblar på om och om igen om samma sak och tappat den röda tråden för länge sen... nåväl. Det är lättare att INTE behöva byta position på något när en viss sak inträffar än att behöva göra det med en massa villkor man måste tänka igenom. Det är helt onödig och det kan nog förvirra spelaren mer än om så många saker som möjligt har en mer eller mindre statiskt position.

Klart... man kan göra samma sak som från sidan men vertikalt istället. Felet då blir att man bara ser hakan/pannan på figurerna. Sidan ger en lite bättre bild av hela figuren. I jämförelse så ger en profilbild (halvt ansikte) en bättre bild än om man får se halva övre eller undre delen (tror jag iaf).

TL;DR
Positionera saker på sidan gör det lättare att programmera eftersom man inte behöver flytta baspositionerna för figurerna. Det ger också ett jämnare interface då man vet var saker ska vara så de inte flyttas runt mer än nödvändigt.


Hoppas ingen förstod något alls! Om det inte vore för att jag INTE vill sitta här till halv 2 inatt så skulle jag kunna skriva något bättre kanske. Har jag missat något så skriv/fråga. Frågor om detta skiten... fråga irl sen så kan jag väl försöka förklara bättre ;(

edit: Man får tänka lite runt om. Interfacet är inte där för att det ska se DÖTTSKOOLT ut. Det är där för att hjälpa spelaren att snabbt få en överblick över allt denne kan behöva veta så snabbt som möjligt. Interface är en hel vetenskap och man får lägga lite tankekraft bakom det hela :>

Roy

Posts : 51
Join date : 2009-03-11

View user profile

Back to top Go down

Re: User Interface

Post  stefan on Wed Apr 22, 2009 8:38 am

Bra med tankeverksamhet bakom det hela, det gillar vi. Men att stapla dem längst den vänstra kanten så som den sista bilden tror jag inte kan fungera pga tre problem (designmässiga).

1. Hur ser man vem i gruppen som är aktiv? Ska dess ikon bara förstoras då för att peka ut den räta babushkan?

2. Vart indikerar man att babushkan har ett item? Som som det ser ut på senaste bilden så funkar det bara att visa den sista babushkan i ledets item.

3. Kan bli lite störande om man har alla babushkas samlade och GUI't sträcker sig 1/3 in på skärmen. En lösning på detta vore att bara radda upp det närmaste barnet man har. Den största babushkan vet bara vilken som han håller i och den näst största vet bara vem han har etc. På så sätt blir det bara två babushkaikoner som max. Kan dock bli otydligt att få en överblick över vilka babuskas som finns i vem.

MEN! Vad sägs om att inte visa barnen alls!



De små färgade plupparna (som kan vara miniatyrbilder ist för färgpluppar) symboliserar vilken huvudförälder som han tillhör.
Rent och fint blir de iaf

stefan

Posts : 20
Join date : 2009-03-11

View user profile

Back to top Go down

Re: User Interface

Post  louisestigell on Wed Apr 22, 2009 8:54 am

En sak att ha i åtanke ang. att GUIt sticker in på skärmen: Vi har bara fyra spelarstyrda babushkor kvar i den version av spelet vi siktar på att hinna få klart.
Men jag ser ändå hellre GUIt på botten av skärmen istället för vid sidan av. Vill att så lite som möjligt ska störa spelarens periferisyn.
avatar
louisestigell

Posts : 126
Join date : 2009-03-10

View user profile

Back to top Go down

Re: User Interface

Post  Roy on Wed Apr 22, 2009 10:46 am

stefan wrote:Bra med tankeverksamhet bakom det hela, det gillar vi. Men att stapla dem längst den vänstra kanten så som den sista bilden tror jag inte kan fungera pga tre problem (designmässiga).

1. Hur ser man vem i gruppen som är aktiv? Ska dess ikon bara förstoras då för att peka ut den räta babushkan?

2. Vart indikerar man att babushkan har ett item? Som som det ser ut på senaste bilden så funkar det bara att visa den sista babushkan i ledets item.

3. Kan bli lite störande om man har alla babushkas samlade och GUI't sträcker sig 1/3 in på skärmen. En lösning på detta vore att bara radda upp det närmaste barnet man har. Den största babushkan vet bara vilken som han håller i och den näst största vet bara vem han har etc. På så sätt blir det bara två babushkaikoner som max. Kan dock bli otydligt att få en överblick över vilka babuskas som finns i vem.

1: Genom den lysande cirkeln som ligger bakom dockan. Har jag även skrivit någonstans tror jag :>

2: Jag fick det förklarat så att OM en babushka har en annan babushka i sig så kan denne inte ha ett item på sig. Dvs den kan bara ha ett föremål i sig, babushka eller sak.

3: Det är just av denna anledningen jag har med en bild då alla dockorna är i en annan docka och det tar mindre än 1/10 i sidled. Ju längre ner på skärmen du går för dockan som är "föräldern" för gruppen desto mindre "barn" kan den ha eftersom du inte kan lägga in en babushka som är större än den själv. Därför formas interfacet såhär ungefär som en trekant.
Code:
    /
  /
~

Jag ser din tanke bakom din version Stefan men den gör det inte lika lätt att se vem som innehåller vem utan man måste kolla runt och tänka efter lite mer. Det är ungefär samma som Hogge hade uppe som förslag från början som jag ville utveckla så att man kan se tydligare :)

Om vi nu bara ska ha 4st dockor så gör det om ganska mycket och man skulle väl kunna ha dockorna i nedre kanten. Ska ni ha med fler dockor senare så ser jag hellre att vi använder höger eller vänster sida.

Så en sista sak. De bilder jag har lagt upp är lite dåliga och jag missar också saker såklart, tex en sådan lätt sak som att den dockan som är störst bör nog ligga överst i vad det gäller lager. Dvs dockan längst till vänster ska ligga överst och den längst till höger ligger underst vilket gör att det blir lättare att se vilken man kontrollerar om det är en grupp och man ser vem det är som har alla i sig lättare. Tackar Nils för den synpunkten.

Roy

Posts : 51
Join date : 2009-03-11

View user profile

Back to top Go down

Re: User Interface

Post  Roy on Thu Apr 23, 2009 5:16 pm

En uppdaterad bild då. Simplare blir det nog inte.




Notera att det är samma som gäller nu som då. Nya grupper eller ensamma babushkor hamnar nedanför, dvs det enda som ändrats är att de växer ut åt höger istället för snett ner åt höger. Items ligger under babushkan som har det.

Roy

Posts : 51
Join date : 2009-03-11

View user profile

Back to top Go down

Re: User Interface

Post  Tobi-chan on Mon Apr 27, 2009 10:43 am

Roy wrote:Interface är en hel vetenskap och man får lägga lite tankekraft bakom det hela :>
Håller med, vi måste tänka på användarvänlighet, alltså lättillgänglig information och lättnådda kontroller. Annars blir det Age of Conan av hela skiten... =__=
avatar
Tobi-chan

Posts : 55
Join date : 2009-03-30

View user profile

Back to top Go down

Re: User Interface

Post  Sponsored content


Sponsored content


Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum