19. 02. 2007

8th VO - a guest lecture - 19. Feb, 21:59

again, i am going to publish this article in german because i am using my original notes...

Gastvortrag "Wollzelle" - designing an application
  • mediadesign seit 2000 (u.a. gucci, tu), 4 mitglieder
  • thomas pamming; geschaeftsführer, htl-absolvent, architektur auf tu
  • drei kern gebiete:
    1. identity (corporate, logo design)
    2. media (magazine, cdroms, websites)
    3. apps (rich client anwendungen)
  • business modell: "learn, how to learn together"
    • kommunikation unter spezialisten
    • design vorschlag von entwickler abgelehnt wegen techn. unmachbarkeit
    • schuldigen suchen immer im vordergrund; anstatt co-working
  • prioritaeten um entscheidungen zu treffen
    1. work (die arbeit/produkt an sich)
    2. client-agency relation
    3. myself
  • projekte: 80% indiviudelle arbeiten, 20% generische produkte
  • bsp projekt: www.gucci.com
    • frontend wurde vollkommen wollzelle ueberlassen
    • website wurde frueher vollkommen in flash uebersetzt
    • -> problem mit backend zusammenzuhalten
    • -> deshalb: alles mit javascript
  • bsp projekt: www.fluxiom.com
    • webanwendung zur verwaltung von medien (visuelles wichtig...)
    • previewgenerierung, volltextsuche, file-tagging, onthefly resizable (iphoto like)
    • web2.0 features: ajax, dragndrop, autocompletion, ...
    • ruby, scriptacilous (basierend auf prototyp library)
    • mac/win native uploader
  • bsp projekt: www.script.aculo.us
    • javascript visualize library
    • verwendet von u.a. nbc.com und apple.com
    • ist teil von ruby on rails
  • naehkaestchen plausch durch fluxiom-erfahrung...
    • am anfang steht das design ("design is not just the facade")
    • nicht ueberfeaturen (nur weil koennen, nicht gleich machen)
    • -> reduce features
    • -> 80/20 rule: "loose weight", 80% der dinge mit 20% der feature erledigbar
    • schwerpunkt suchen/finden (message durch anwendung)
    • geht nicht darum "sachen huebscher zu machen"
    • "the featuritis curve" ... number of features zu kosten der user happiness
    • -> resultat durch zuuu viele features: "i suck"
    • -> nicht programm ist schlecht, sondern denk schlecht weil mit programm nicht umgehen kann
    • "make small decisions", nicht in 3 jahres riesen schritte planen
    • -> kleine schritte/plaene sind weniger risikoreich (wenn zb fehlschlagen, revidierbar)
    • "be yourself", durch nurmehr reagieren, keine zeit mehr zur innovation
    • frog-cooking-example:
      • wenn frosch in kochendes wasser werfen, springt der gleich raus
      • wenn frosch in kaltes wasser und langsam waermer, passt er sich an
      • -> bis das wasser kocht und dann kann er sich nicht mehr bewegen
    • testen (am besten mit mac + parallels; viele versch. os, viele versch. browser)
    • "just say no" (or quit)
    • ->besser fuer uni: "just say yes"; herausfinden was einem gefaellt, experimentieren


wollzelle

why i hate word - 19. Feb, 21:09

intro

i got to do something in work with word and as we are all used to be, got an non-informational error message. but THAT message did not contain any usefull information and i dont think anyone (okay, maybe some guys from asia) could have gathered any information from it.

the big embarrassment

word displaying funny symbols

this dialog popped up just after word started, showing some chinese symbols and the path to my windows home directory.
i want to point out that little symbol in the first row i highlighted with a red circle... i totally disagree with that, no way, baeh, pfui, should not be.

why i hate adobe - 19. Feb, 20:58

intro

i just wanted to get rid of adobe cue because i am not really in need of it. so, after running the uninstallation application i got the following message dialog...

the big embarrassment

displaying some crap

ehm... yeah, got some error. i assume the "%d" stands for a format string (signed decimal integer) and there should be the appropriate error code displayed. but somehow the format string itself got displayed. again if they just would have used some predefined values or catching this situation with a simple if-condition that would not have happened.

why i hate ie7 - 19. Feb, 20:50

intro

i just wanted to play around with microsoft's new webbrowser to see if they were finally doing something on the development. okay, it got tabs (although it could have somehow more functionality) and the interface looks much more cleaned up.
while i was surfing for some misc stuff, it seems that the site was using an uninstalled encoding, so the browser asked me to confirm installing a chinese language package. so far so good...

the big embarrassment

i had the following options to interact with the dialog box:
  • regular close button in upper right corner
  • install button
  • cancel button
  • checkbox to never ask again
IE confirm language installation

install it? now way.... close it? no, because i dont want to be asked again, so click on the checkbox. but... there is no possibility to confirm the option to "not to be asked again", only installing it (what i didnt want to) and to cancel it (but i dont want to cancel the option to "not to be asked again").

so, my own proposal how to solve this problem would look like the following dialog:

IE confirm language installation proposal

wasnt that hard, wasnt it?

16. 01. 2007

mockup remote control - 16. Jan, 23:15


mockup remote control

... coming soon ... (hopefully)

... nicccce ...

remote from above=

10. 01. 2007

pronounciation of that stupid name - 10. Jan, 16:35

of course, if you do follow our common rules, you would pronounce it "fuddy", but because it got its origin by the most famous german rock group the puhdys, you say

PUDY.

just a little comment by the way because some people like to misspeak that name...

27. 12. 2006

some really old sketches - 27. Dec, 21:51

coldfish textlogo

coldfish, my project for the final exam.
it was a usual webplatform with games, scripts, different communication possibilities et cetera. it also had some nice features like videomessage broadcasting, banner managementsystem, speechengine and a global rating system with points and trophies.


know your enemy

analyzing the ui structure of two popular gaming platforms: miniclip.com and newgrounds.com (i personally do like the second one more).

sketch_enemy


menu

designed the home page with a little bit more detailed left handed menu. as you can see i afterward replaced the setting/mail icons -thanks to this design instrument i did not realize this during implementation, or even later.

sketch_menu


poll

simple voting system, where you can select different polls, vote one time for one option, see visualized result and get some info about a certain poll in a popup. there are two panels connected by an arrow, because the right one indicates behaviour if already was voted or if user is not yet logged in.

sketch_poll

poll ready

these four screenshots shows the following scenarios: 1. loading content animation 2. select vote option from dropdown menu 3. get info about current poll 4. submit selection animation.

sketch_poll_ready


register

this sketch is the structure of the newgrounds register site.

sketch_register

register ready

decided to split the register process into five steps.

sketch_register_ready


misc

more detailed front page and two other misc sites.

sketch_tripel



if anyone is interested in some more details, have a look at the presentation.

coldfish logo


something about human being - 27. Dec, 21:47

human memory

"before many can know something, one must know it", henrik ibsen.

// no direct access (associative memory)
// quiz shows -> does not measure intelligence but power of memory (also depends of cultural/social surroundings)

-- PUT CONTENT IN HERE --

intelligence

"software was a big headache. we had to think through all the opportunities to fail. being autonomous, you have to tell it every little thing", richard karl.

ever since human people think they are the best evolution has created on this planet. first of all, they thought the human has the biggest brain -wrong: an elephant has much more brain mass than we have. okay, they revised their statement and claimed following: human people have the biggest brain relative to their total mass -wrong: on the seaside of finnland a fish was found whos brain compared to his total mass is bigger than the relation of brain to total mass of a human.
i personally totally abhor this attitude. but somehow i must agree that humans got something that make them "better" in any way than other species on the planet -why else are we widespreaded all over the world, dominating any and everything?! maybe its our ability to adapt to new environments and prepare for new situations.

one interesting thing is the ongoing attempt to give an exact definition of intelligence. i have found a good one which could come very close:

"intelligence ist the ability to reach aims despite all obstacles and difficulties, whereas decisions were made rational and based on certain rules.", concluded message taken from science fiction stuff.

experience and decision finding

-- PUT CONTENT IN HERE --

human strength and weakness

-- PUT CONTENT IN HERE --

the early beginning - 27. Dec, 21:30

so, has anytone asked himself why this LVA is called user-interface-design and what these terms mean? what is the aim of peterpur, what does he want us to tell? what is it all about?

the user

the key part you should keep in mind is the user which will work with your software. you can make the best software for a certain task ever written, but it wont be that popular if you ignored the target group and their characteristics.
also a common mistake -done be many opensource developer- is to think of the user as the most stupid expected person (a DAU, dümmster anzunehmender user) or sometimes called aunt tilly, the very nice but unskilled relative you got.
its a good practice to create personas who will give you an approximately idea of how such person could be. more infos about personas were given in the 6th VO:





the interface

an interface is a method how human interact with -not only- machines (in german often referred as MMS, mensch-maschine-schnittstelle). peterpur used the car as an example. everyone is familiar with how driving a car: there is a steering wheel, a gearshift lever, two or three foot pedals and some other knobs/buttons. as this is a standard interface, you can drive nearly every car. these interface possibilities are the only methods you can interact with the car and influence the behaviour of it. sometimes there also exist some meta interfaces. the most obvious interfaces i have listed before are not the only way you can direct manipulate the car's behaviour. using them at the same time in a special way (use handbrake to drift) may lead to more possibilities.

some time ago i liked to analyze everything (and still i do), especially music instruments. find out the predefined ways to interact with this instrument, maybe explore some more things you can do with it and see them as interfaces -what they actually are.

so everytime you are using any human made item, you can somehow manipulate it through pushing, pulling, turning, moving, sliding, ... the big problem in software developing is, that you are very limited in how people can interact with your software. they only got a keyboard and a pointer device (mouse, touchpad) but do want all the things they are used in the real world. it should be easy-to-learn/use, intuitive, appealing and made in a consistent way throughout your application (or even operating system).

the design

-- PUT CONTENT IN HERE --
// design often refers to the system architecture
// design may be the layout
// but is also how you interact with something (software in our case)

the user interface design

-- PUT CONTENT IN HERE --
// put things together
// how people will use your software

7th VO - seven deadly designtraps - 27. Dec, 20:36

this time the summary will be partly in german because i am using my "mitschrift" i have written down during the lecture.

toc
  1. die mit der oberflaeche
  2. die mit der intuition
  3. die mit der komplexitaet
  4. die mit der richtigen nutzung
  5. die mit den grossen konzepten
  6. die mit dem wert von design
  7. die mit dem pflichtenheft
summary

1. die mit der oberflaeche
***************************
- design ist nicht nur das, was man sieht; steht nicht nur ganz am anfang
- design ohne ruecksicht auf die nutzung ist p.i.t.a. (pain in the ass)
- prozess sollte user-bezogen sein (nicht technologie-bezogen)

2. die mit der intuition
***************************
- intuitiv nutzbar ... oft gemeint: verwendung von metaphern
- aber: ist vorbild gut gestaltet? (metapher-gesteuertes design, zb: taschenrechner)

3. die mit der komplexitaet
***************************
- software muss vermitteln (darf nicht user und aufgabe trennen)

4. die mit der richtigen nutzung
***************************
- zb: ein kamm; kann man frisieren, musik machen, herumkratzen
- abuse kann oft sehr gut sein
- im musik bereich ist abuse ueblich
- jimmy hendrix hat zb mit feedback schleife musik gemacht
- daft punk/share ("believe") missbraucht geraete um gute musik zu machen
- im bereich opensource ist abuse zb einen fork erstellen
- linux auf xbox ist nicht erlaubt

5. die mit den grossen konzepten
***************************
- zb textcursor blinkt durchgehen, ausser wenn: schreiben/cursor-tasten druecken
- wichtig, damit man weiss wo man ist
- zb wenn in url feld reinklicken und dann schreiben, sollte mauscursor verschwinden
- zb excel kann nicht zwei dokumente mit zwei gleiche namen oeffnen (selbst wenn in andere ordner)
- zb word hat man dok offen und legt es im dock ab, dann selbe nochmal im finder aufmachen -> "want to revert?"
- technisch gesehen sind es 2 dokumente (1 ram, 1 festplatte)
- jedoch sollte es so gehandhabt werden, wie es der user sieht (existiert nur eine version)
- zb timbuktu (als auch apple remote desktop und andere) haben liste
- diese wird updatet und neu sortier sobald neue eintraege
- wenn auf ein klicken wollen und updatet dann auf anderen unabsichtlich klicken

6. die mit dem wert von design
***************************
- falsch: gutes design ist unsichtbar
- tatsache: gutes design schaut meistens gut aus

7. die mit dem pflichtenheft
***************************
- mit pflichtenheft erreicht man mittelmaessiges projekt (zumindest halt wirds nicht ganz schlecht)
- zum zeitpunkt der erstellung des pflichtenhefts ist noch zuwenig geklaert
- pflichtenheft sind manchmal banal und uninteressant (die sind die besten pflichtenhefte)
- anstelle von pflichtenheft: ein pflichtenwiki

imho

-- PUT CONTENT IN HERE --

6th VO - design instruments - 27. Dec, 18:50

toc
  1. sketches vs prototyping -- doing wizard-of-oz-ing
  2. user testing -- understand, interact, work
  3. personas and scenarios -- representative fictitious perons
  4. mood board -- associative artefacts
  5. probes -- observe real life environment
summary

sketching is a way of ...
   ... my thinking pen
   ... having a conversation with his drawing
   ... seeing-moving-seeing

buildingsketch1

this sketch was made by an architect. its not very clear what perspective was used nor you can see any outlines indicating this will be a building in the near future. it was drawn very fast and do not contain any details -the best way creating sketches.
i want to mention two important things by the way:

- he used a regular pencil (no biro)
- he didnt use checked (mm) paper but plain paper
- he drew freehand (no ruler or other tools)

sketches have the following nature:
  • easy and fast drawn
  • cheap and many of them
  • able to throw them away without repentance
  • simple lines and clear gesture
  • high abstraction level, without details
  • ambiguous, unclear, inspiring
so, sketches are not limited to regular paper-pencil one, but do also include shoot photos or simple animations.

wizard-of-ozing is a term which describes a fake machine. as far as i can remember, the so called wizard of oz was a professor which just used a machine to make the people believe he is a big mysterious magician.
this way you can test (the interface/functionality of) your non-existing system with real users as it was written already. therefore you have to ability to redesign it in a very early state (even before implementing a single line) but simulating a state which will be reached months later.

it can be a big risk if the client does think of the sketch as a final preview of what he will get. sketches are note final documents, they are things you could throw away anytime because only the process drawing them was important (which should not take that much time).

of course the sketches at their own are not the main aim; creating them is the aim. sketches have not to be that good-looking, do not invest too much time in details or aesthetics.
another problem is the missing possibility to sketch interactions (activities distributed over a timeline). you have to use arrows and enumerations to explain them in a drawing and might not be that self-explanatory.

the picture below shows the final 3d model of the sketch above. as unclear the previous sketch looked like, you now can see similarities. first drawing a simpley sketch gave the architect the possibility to totally get free of all architectural dependend details and only focus on the design part.

buildingsketch2

sketches are not only byproducts of designing, they are an essential instrument of our way of thinking and learning. the close feedback-loop let us transfer thoughts to the real world via movements of the hand. some often used buzzphrases to explain this phenomenon are: "analysis through synthesis" and "doing for the sake of knowing".
both reading and drawing sketches are qualifications which separates designs from non-designers.

some sketches from my own can be found in the sketches area. some of them are a few years old, a few of time are totally fresh -just have a look.

sketches and prototypes are very similar -but do not mix them up. the following table shows the main differences in single characterising words:

sketch prototype
invitation visitation
indication description
exploration refinement
question answer
proposal feasibility test
provocation clarification
tentative specific
temporaryfinal

if you want to test a prototype for a pda, why not use a simple block of wood?!

wooden_prototype

you can easily get a feeling how you will use this little computer -the usage can be simulated at very low costs. just tell the probant to hold the computer (the block) as it was portrait or landscape format.

usertesting_girl

user testing allows you to see how people are working with your application. the reason why you are writing software is because these people will/want to use your piece of software, so the end user is the most important part. to get some support analyzing gathered information through user testing use some tobii.se soft-/hardware. this tool let you capture eye movement. just have a look at this example movie.

as you can see they have followed one important rule: also record the user him/herself. if you do not like to postedit the videomaterial, just put a mirror next to the display and record both of them.

user testing can be described as working together with users with sketches/prototypes/mockups and ...
  • with a certain sense (do some tasks)
  • with the possibility to abort it
  • with certainty for the user (preceding introduction)
  • with spoken thinking (but do not answer user questions)
  • with camera (and mirror)
  • with postprocessing (answer questions, discussion)
there are three layers of user testing existing:
  1. understand -- what can you see, what could you do with it
  2. interact -- fill every field, enter date x into that one
  3. work -- withdraw amount y to your brother

personas are very usefull if you want to get an idea of how the user might use your application depending on his/her characteristic. its a kind of representative virtual person you describe very detailed (about a page): age, image, personality, job, tasks, hobbies, ...
if there is a decision to make and you are uncertain about how to do it best, jusk ask your persona (think of it and its characteristic) who will probably help you getting the right answer.

scenarios do help -with use of some personas- testing ideas/concepts/models and let you explore new possibilities of how to do it. they can be even used in presentations to explain something exemplary.

moodboards

mood boards are a collection of various artefacts for a project. this mental chaos consists of cut out pictures or buzzwords, technical documents, lines connecting these artefacts and even any stuff picked up somewhere which was the initial idea setter.

for the sake of completeness i have to mention (cultural) probes. these are packages of recording instrumentals (camera, sound recorder, a simple pen, a map, et cetera) and a certain task to fulfil. with other words, the essence of cultural probes are "one way to access environments that are difficult to observe directly and also to capture more of this felt life".

imho

until now i was only used to practice sketching as the primary design instrument -and sometimes prototypes if complexity gets too big. after the lecture i will do two things different by now: use a pencil and not use checkered paper. and as a remainder for the future: not the drawing itself (the endproduct, the piece of paper) is the aim, the act of doing it is the source of design power.

i think user testing is something you naturally do if you write some piece of software. maybe not that bloated and equipped with a camera, but everytime you show a friend how proud you are about this certain feature and let him/her a try.

maybe i have done what many other developers also often do: concentrate on the technical side without considering the outside world (the "real" world), which not only includes persons working with the software. with the help of the other instruments you do have access to the surroundings of your project and can let this result flow into proceeding research.




30. 11. 2006

5th VO - design essentials pt2 - 30. Nov, 15:52

toc
  1. practical tipps -- how to realize it, possible models, competences
  2. where should uid placed? -- uid, swe( software engineering), context
  3. unity of analysis and synthesis
  4. what would be if?
summary

after a short recapitulation of the preceding content (design depends of interessts/context, just during design process the problem can be defined, its an late/open iteration and limited democratic), peterpur gave as some points to keep in mind when doing (user interface) design in real:
  1. be careful of requirements specification, could be a source of restriction of what you might think is possible (how you could do it)
  2. scrutinize everything (needs a lot of trust from the client)
  3. work cooperative and creativ with others together (involve enduser)
  4. be inspired of good existing solutions (imitate or even improve them)
  5. do not believe in traditional (and unsuitable) phasemodels for uid
but where should uid be placed? in the early beginning (supporting the engineers), somewhere in the middle, beside, at the end or not at all (cheapest option)?
it would be best if it is placed in the core of the whole project as you can see in the graphic below, which indicates that uid is a parallel process and never really ends:

uid_core

context

to get a good starting point of design it is necessary to ask yourself why the work order was made. first of all there exists a situation which is not sophisticating. if you (or the client) realize this situation may define at as a problem which should be solved with the help of some guiding principles. the next step is an idea which finally leads to the end of this chain: the work order you got.
at this point you mostly do not have many things to decide anymore because everything you have to do is implement exisiting ideas with all its problems. also if you go some levels below, you might overtake perspectives and priorities which leads to bad design (also the potential for innovations is not that great).
you have to go down to the root and scrutinize the inherent necessity. starting here can result in very radical solutions because the potential for innovations is very high. the only difficult thing is: a lot of confidence must exist between you and the client.

swe

traditional swe (actually software project management) knows a lot of processes you can follow to accomplish your project successfully, e.g.: waterfall, spiral or the V model. the big problem is, designing software is not an iterative process where you go from one step to another. you often go back from step 5 to step 2 because you recognized during user testing (which may be step 5) that something in user requirements analysis went wrong. you are need of more flexibility to immediately react on new client requirements.
an alternate process could be a kind of a wheel. first of all the user requirements analysis and then enter a wheel iterating over these four elements: design, prototyping/implementation, test and evaluation. this lets you change very fast from one phase to another -but sometimes you even have to switch from testing to implementation and leave out evaluation/designing. repesentants which follow this way are extreme programming and scrum.
a more alternate process shows the following image. no real connections are visible indicating the open process of uid and the possibility to immediately switch from one phase to another.

alternate_uid_process

uid

what do we actually mean with design is an open process?
our mind is not an own unit, not totally separated from the world, only interacting with it and simple cognition. it is more like analysis through synthesis -we are used to understand the world (and how it works) through manipulating with it. there is no way to separate these two things -if you try, you will fail.

open_mind

so, unity of analysis and synthesis (doing for the sake of knowing) is very important and must not be separated. if it is, synthesis will be left unreflected during analysis.
one important phenomomenon is the primary generator. these are the first ideas which leads the design process and can be somehow a restriction because you will focus on them too strong. they become a problem, if they remain unrecognized.

an essential design strategy is to question yourself "what would be if" (problem setting as a fundamental part of design). first of all determine what the problem actually is, then determine the frame (what is concidered as the problem to solve, what is not?) and do reframing if the fixed frame is not suitable anymore.
frame experiments (what would be if we do it that way) are the main part of the next lecture, describing easy tools like sketching and prototyping to immediately evaluate results and change specifications in a very early state of the project.

at least the design instruments are worth to mention. they have a considerable influence on the result. they have two main properties: are light weight (need neither many persons nor much money/time) and have less own influence on result (suitable as inquiring materials). keep in mind, that also process models are design instruments.

imho

my dream of a perfect software is completely defined in my mind, after i have written the exactly software already. this means writing a prototype which has 100 percent functionality and everything implemented as the real application will have (would not be prototype anymore but a first-version-throw-away-test). this solution would be that uneconomical that it will not be done in real, but i personal like this idea. you are prepared, know how it should be implemented in detail and therefore nothing unexpected could happen anymore.

ehm... by the way, while looking for some materials (keywords: "bill buxton" separation design implementation) i have found a nice book which seems to be the result of peterpurs effusions, is informatics a design discipline?.


designprocess != democratically - 30. Nov, 15:50

- should be one person who decides
- one responsible person means faster decision finding, faster reactions
- many persons lead to: ignoring minorities, slowing down decision process

the following link describes the effect of multiple responsible persons:

still beta

Search

 

Recent Updates

Apple Mac Mail ist schön...
Apple Mac Mail ist schön und gut, aber hast du...
Macos - 5. Apr, 14:10
8th VO - a guest lecture
again, i am going to publish this article in german...
0525580 - 19. Feb, 22:03
7th VO - seven deadly...
this time the summary will be partly in german because...
0525580 - 19. Feb, 21:51
1st VO - the good, the...
toc visual noise -- "as much as necessary, as less...
0525580 - 19. Feb, 21:44
mockup remote control
... coming soon ... (hopefully) ... nicccce ...
0525580 - 19. Feb, 21:14

bad design
bad practise
good design
good practise
misc
patterns
sketches
VO summaries
Profil
Logout
Subscribe Weblog