Organic Design UI (2010)


Published on

Foundamental Elements for Organic UI Design

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Organic Design UI (2010)

  1. 1. ORGANIC UI DESIGNby Mirco PasqualiniDecember 2002 - First DraftJenuary 2010 - Last draft Organic UI Design by Mirco Pasqualini
  2. 2. FoundamentalsProgressive approachThat’s the most important rule for any UI Designer and Architect.The general dynamic of this argument is “the Interface changehis aspect and complexity proportional to the evolving of Userknowledge about the interface”.The perfect interface is when it will be customized for each userand evolving in the time for follow the user experience. The userfound around him only he need.Ambient determinate the aspectOne of most frequently error starting since the the beginning ofeach UI project is the Skin of interface. Very often we spend fewtime to understand how our UI design will be display in differentdevice and how many different use it can have from each user.Itʼs look like as decide to be an Eskimo (People from North Pole),were like as an Eskimo and living like as an Eskimo and think tobe able to live in any corner of the world from Africa, to Arabia,from Pacific to Miami. This is one of the most important needsof any UI. The Adaptation to the ambient. The adaptation donʼtchange his main function but will determinate the look&feel andthe interactive design behaviors. Organic UI Design by Mirco Pasqualini
  3. 3. FoundamentalsThe elements determinate the group comportmentStarting to think at an interface like as a group of single elements,related them self with a strong property of grouping focused toa specific job/s. Now think to an UI like as a the people group ofSurvival Reality Show, the kind, property and expertise to eachpeople will be determinate the good life or the death of entireteam.This is the same things happen in any UI design project; choosethe right UI element, interactive behaviors, how many elementsdeterminate the result like as put chocolate into the milk for have alight brown or dark brown result.Sharing is the engine of evolutionAt the base of any evolution process, the “sharing” capabilities,determinate the good or bad performing in any team. The bestteam in the world in any sport will be Football, Basket, Soccer, F1,etc.., are winner because they move like as “10” but they think likeas “1”. They have a good based sharing knowledge, they have thesame vision, same focus, same target with different roles. Sharinga method in the same UI or sharing a visual element in moreelements grid make a best performing and make the structuremore light.Optimize and think ModularOptimize, Optimize, Optimize. Donʼt have any redundancy ofUI elements, this help you to make a most quickly interfacedevelopment and more easy update and customization processwhen needed. Think to each grid element like as modular, theInterface design reflects the typical human activity especially themobility, Art and financial rules. In finance for example, when amodular unit donʼt work well and / or make debit, it will be closeor changed with other without shake other unit parent or father.ConslusionDesign an UI is exactly like as build a good Soccer team whereyou are the Team Manager. Organic UI Design by Mirco Pasqualini
  4. 4. Object Oriented VisionObjects definitionIn any interface grid, any element use and displayed will be Propertyconsidered like as an independent element. Each element will belinked with other and create a cloud of objects related by the same Functionscope. SkinEach object is defined by:1. Skin2. Function3. PropertyBehaviorAny elements into an UI have a behavior determined by an event.Usually this events determinate the behaviors of other elementsand in some case the changed of them. The clean and optimized UIdesign architecture determinate too the clean and easy behaviorsorganization.Ambient and RelationLike as describe in the “Fundamentals” chapter, any elements willchange is Skin for a best adapting to the ambient and group whereit will be place. Usually the information about the Skin is providedby the ambient, like as a Soccer team provide colored T-Shirt toeach players. Organic UI Design by Mirco Pasqualini
  5. 5. Object Oriented VisionComplexity & User KnowledgeWhen you create grid and group elements focused to specific function, think thediscover of this “grid” with a progressive approach. An other variable element of UIbehaviors is the TIME and each USER. The TIME of experience of each user with theInterface determinate his knowledge of the tool and this is reflect into a sharing of“work method”, “Workflow” and “UI organization” between the tool and the User.Is like as talk with a Baby or talk with a professional Developer, the start point will bedifferent.EvolvingAn other step to consider when you design UI is the evolving of the elements and thegrid in their skill and behaviors.Directly linked to previous point of “complexity” and “Ambient Relation” the design work,the look&Feel and architecture of the grid, require to be think into a progress evolutionwhere very ofter you need to consider “not-programatic-evolutions-step”. Usually this istranslate in “This space will manage future buttons or needs...” Data UI Data UI Functions UI Display & Devices Server Connectors Framework Behaviors Adapter DEVICE #1 DEVICE #2 DEVICE #3 Organic UI Design by Mirco Pasqualini
  6. 6. Development ProcessHow StartA good start is collect more information possible about the project/interface focus, the elements/content and theambients where it lives. This step i like call “Immersion” because you need to really go in the depth in to the UI“scope-of-life” and watch this stage with many eyes in all over side possible.In the Immersion step you need collect:1. Information about the contents and their self-relations.2. Define the UI grid you require3. Define a list a User Profiles (capabilities, device, knowledge, expertise, needs, etc..)4. Define a list of typical workflow for each user profiles (Make some survey )5. Do a benchmark between: • UI do the same work with same content • UI do the same work with different kind of content • UI do a similar work with different kind of content but with similar complex relations them self.6. Identify Interface solutions don’t have any relations with your project for “work” and “content but they represent and innovation approach if used in your project.7. Introduce that you identify at point 6. The Interface design is like as a Movie or a Music composition, you require the main melody & synopsis but you need too the “Whaoo” effect.8. Create a Visual Wire-frame of the UI and define the grid behaviors for ambient adaptation9. Optimize the process and define each content details elements to place10. Prototype the graphical UI merging the UI Needs and introducing the Innovation “elements” Refine and re-evaluate the GUI with WF for a better match solutions. Organic UI Design by Mirco Pasqualini
  7. 7. Human Kind ApproachThat’s the most important rule for any UI Designer and Architect. The general dynamic of this argument is “theInterface change his aspect and complexity proportional to the evolving of User knowledge about the interface”.The perfect interface is when it will be customized for each user and evolving in the time for follow the userexperience. The user found around him only he need.I know this is a redundancy in this document but is the MOST IMPORTANT THING!Some sampleThe rules of Organic Interface is study from many years into digital business. For example from many years in manyMicrosoft desktop application like as Office Suite and recently into Adobe Suite, in the application menu, some optionare hidden and the application show you only the main action (some time the most used) at first look. The user canask to show all option available only on demand.Thanks to progress of technology the Apple iPhone realize the vision of many years ago when the UI Designerunderstand about the future of UI start from physical products, where the interface will be change.The iPhone represent the best application of Organic Design. At the begin to the user offer only 1 option: “The startButton”. After it show him some other option (applications). His Human Interface is great because can change basingthe use you want do of device (phone-call, gaming, messaging, etc..)To talk more friendly when you meet a new people the first thing you say is “What’s your name?” and not “Which isthe formula will explain the black matter into the black hole and hidden macro Cosmo?” Organic UI Design by Mirco Pasqualini
  8. 8. CreditsOrganic UI DesignCreated by Mirco PasqualiniEmail: mircopasqualini@me.comSkype: mircostudioLinkedIn: 1.0All the abstract wallpaper picture used here are from I pray you to excuse me for my incorrect syntaxform but english is not my native language Organic UI Design by Mirco Pasqualini