Pana azi, lista de colectii online de pattern-uri pentru interfete utilizator pe care as fi recomandat-o cuiva interesat de subiect ar fi fost destul de scurta si compusa din Yahoo! Design Pattern Library si UI-Patterns (iar offline Designing interfaces si Designing Web Navigation ).

La aceasta lista tocmai s-a mai adaugat inca o colectie online foarte utila, bine organizata si cu cea mai frumusica interfata (merita sa imi instalez Silverlight special pentru asta :) ) - Quince, cea mai noua productie Infragistics (de care am aflat prin intermediul blogului lui Chris).

Imi place foarte mult navigatia care permite gasirea unui pattern fie prin cautare dupa cuvinte cheie sau explorarea patternurilor in functie de ce incearca utilizatorul sa obtina (User tasks), dupa tag-uri ( cu o interfata foarte sugestiva) sau dupa schita (wireframe).








Mult mai multe detalii si explicatii pe blogul Infragistics.

Via Design vs Art blog am aflat de Balsamiq,o aplicatie AIR foarte utila celor care lucreaza in web.

Intotdeauna pentru orice site sau orice aplicatie care necesita o interfata, va fi nevoie de o modalitate cat mai usoara pentru a arata clientilor o schita a acesteia si a ilustra vizual componentele principale alea acesteia.
Din cate aplicatii am incercat pana acum in acest sens, am constatat ca PowerPoint si Word sunt destul de rudimentare in timp ce Visio si Photoshop au dezavantajul ca necesita destul de mult timp si munca atat pentru a invata cat si pentru a obtine rezultatul dorit.

Balsamiq in schimb pare solutia ideala :
- usor de invatat
- usor de folosit
- dedicata domeniului web, cu o multitudine de componente specifice
- ieftina

Exemple realizate cu Balsamiq (mai multe pe pagina lor de exemple)






Aspectul nefinisat este intentionat, pentru ca atentia sa se concentreze asupra functionalitatii si nu a graficii.
Balsamiq va scuti ore intregi de munca si modificari ale designului , va clarifica de la inceput un numar suficient de mare de dileme si intrebari; in plus imi pare a fi solutia ideala si pentru teste de utilizabilitate.

Mai multe detalii in articolul original si pe pagina oficiala (demo disponibil cu toate optiunile activate cu exceptia celei de salvare).

Me likey.

O colectie deosebita de interfete si aplicatii pline de defecte poate fi gasita pe Coding Horror.
Preferata mea o puteti gasi sub titlul What happens when you let the developers develop the UI.
Trebuie sa recunosc ca arata demential



O discutie foarte interesanta mi s-a parut si cea pe tema site-urilor sociale care cer emailul si parola acestuia.

Am descoperit un post foarte interesant despre evolutia a 10 mari site-uri (precum Apple,Yahoo!, Amazon, CNN,Microsoft) de-a lungul ultimilor 12 ani - aici

Unele au trecut prin schimbari radicale (precum Apple, Microsoft si Adobe), altii au fost destul de cool inca de la inceputuri (Nike).
Sunt curioasa daca peste 10 ani designul gen Web 2.0 (colturi rotunjite, detalii lucioase) va parea la fel de demodat ca fontul Times New Roman din acest design Yahoo! al anilor '96.

AJAX reprezinta probabil cea mai folosita tehnologie in momentul de fata pentru crearea de interfete web cat mai user friendly. Cum cunostintele proprii in aceasta directie inca nu-mi permit sa creez de la zero decat scripturi foarte basic, am descoperit cu bucurie MiniAjax, o colectie de scripturi gratuite, pe cat de utile, pe atat de simplu de implementat.

Mi-au placut ClickHeat, Bubble Tooltips si Carousel.

Un articol excelent despre designul interfetelor
si inca 2 (unul aici si altul aici) despre usabilitate.

Design pattern-urile din dezvoltarea software sunt cunoscute de majoritatea programatorilor (de fapt de orice programator care este peste nivelul junior).
Am avut recent placuta surpriza sa dau peste un site de patternuri pentru interfete utilizator : UI Patterns

Cum Stef si Adi isi bat capul de cam 1 an sa ma invete design pattern-urile clasice (si recunosc ca sunt un elev groaznic, cum nu i-as dori nimanui), imi propun sa ma opresc pe viitor si asupra acestor patternuri UI ;)

Johnny Chung Lee a gasit niste noi intrebuintari pentru telecomanda Wii precum un whiteboard interactiv (filmulet mai jos) si urmarirea miscarilor degetelor si a capului.
FOARTE COOL!



Cod si explicatii aici

Via Toni (multumesc mult!), o lista cu topul cartilor despre interfete utilizator si usabilitate

Resurse online pentru un look Web 2.0 - 13 Online Generators for Web 2.0 Design - foarte bun

Arhitectul Yahoo! Douglas Crockford (inventatorul JSON si unul dintre cei mai cunoscuti prezentatori a seriei de conferinte AJAXWorld) ne prezinta pe blogul sau cateva idei pentru a inbunatati standardele HTML5 (momentan in faza de proiect, fara aprobarea W3C).

Cele 10 idei prezentate ar contribui, in viziunea sa, la reducerea complexitatii pastrand in acelasi timp extensibilitatea, reducand astfel costurile trainingurilor pentru programatorii web si facilitand folosirea AJAX.
Una dintre aceste propuneri ar fi renuntarea la frame-uri, acestea fiind inlocuite de module.Alte doua idei (care mi se par cele mai bune sugestii) ar fi acceptarea tagurilor si atributelor custom.
Pentru o lista completa, click aici.

Crockford isi prezinta ideile astfel :
"It provides extensibility without complexity. The deltas from HTML 4 are generalizations and reductions, which should make browser implementation more straightforward. This is particularly important for mobile devices that cannot tolerate the power demands of complex platforms. The only new feature here is the module, which is critical for security. Modules makes safe mashups possible."

Tema 2 a fost implementata in Python 2.5 si s-a folosit pentru baze de date sqlite3 (incluse in pachetul standard Python).

Site-ul analizat este www.photosig.com. Programul pleaca de la un user si creeaza lista prietenilor sau a dusmanilor acestuia prin analiza comentariilor de pe ultima poza isncrisa pe site. Procesul se repeta pentru fiecare user.

Iata codul in Python:

#Ionescu Radu-Dragos 351 C2
import urllib, sqlite3

def cautarePoza(id):
#accesez pagina cu toate pozele userului ID si intorc linkul primei poze
aux="http://www.photosig.com/go/users/userphotos?id="+str(id)
fisierHtml = urllib.urlopen(aux)
s = fisierHtml.read()
index = s.find("/go/photos/view;jsessionid")
indexI=s.find("?id=",index+27)
aux=""
idPoza = ""
indexI=indexI+4
while s[indexI]!="&":
idPoza = idPoza + s[indexI]
indexI=indexI+1
return idPoza

def analizaPoza(idPoza):
global db
global userB
aux="http://www.photosig.com/go/photos/view?id="+idPoza+"&forward=user"
fisierHtml = urllib.urlopen(aux)
s = fisierHtml.read()
filename = "test.dat"
FILE = open(filename,"w")
FILE.writelines(s)
FILE.close()

i = s.find("alt=\"Thumb")
if i==-1:
print "Fara comentarii"
return -1
i1 = s.find("alt=\"Thumb", i+9)
while i1!=-1:
iaux = i1 + 11
if s[iaux]=="u":
relatie="prieten"
if s[iaux]=="d":
relatie="dusman"
indexI = s.find("/go/users/view;jsessioniddas",i1)
indexI = s.find("?id=", idUser+ 25)
indexI = indexI+4
idUser = ""
while s[indexI]!="\"":
idUser = idUser + s[idUser]
indexI=indexI+1
print "Iduser = "+idUser
aux = indexI + 2
numeUser=""
while s[aux]!="<": numeUser = numeUser + s[aux] aux = aux+1 # introducere in baza de date url = "http://www.photosig.com/go/users/view?id="+idUser t1 = (idUser,url,numeUser) e = 0 c = db.cursor() c.execute("SELECT oid FROM utilizator") for row in c: if str(row[0])==idUser: e=1 if e==0: c.execute("INSERT INTO utilizator(oid, url_profil, username) VALUES(?,?,?)",t1) f=0 t2 = (idUser, userB, relatie) c.execute("SELECT oid1, oid2 FROM colaborare") for row in c: if str(row[0])==str(idUser): if str(row[1])==str(userB): f=1 if f==0: c.execute("INSERT INTO colaborare(oid1, oid2, detalii_colaborare) VALUES(?,?,?)",t2) t3 = (idUser, url, numeUser) g = 0 c.execute("SELECT username from useri") for row in c: if str(row[0])==numeUser: g=1 if g==0: c.execute("INSERT INTO useri(oid, url_profil, username) VALUES(?,?,?)",t3) i1 = s.find("alt=\"Thumb", aux) #Program principal db = sqlite3.connect('ie.db') cd = db.cursor() limita = 3 userB = "245246" s = cautarePoza(userB) analizaPoza(s) #ne conectam la useri si alegem cate un user #stergem userul dupa i = 0 while i=limita:
s = cautarePoza(userB)
analizaPoza(s)
break

print "Tabela utilizator:"
cd.execute("SELECT oid FROM utilizator")
for row in cd:
print row[0]
print "Tabela colaborare:"
cd.execute("SELECT oid1,oid2,detalii_colaborare FROM colaborare")
for row in cd:
print str(row[0])+"-"+str(row[1])+": "+row[2]
print "Tabela useri[neparcursi]:"
cd.execute("SELECT oid FROM useri")
for row in cd:
print row[0]

db.close()

Un filmulet foarte interesant despre noua librarie Javascript pentru Blogger, cu exemple de utilizare.