background preloader

First Principles of Interaction Design

First Principles of Interaction Design
The following principles are fundamental to the design and implementation of effective interfaces, whether for traditional GUI environments, the web, mobile devices, wearables, or Internet-connected smart devices. Help! This is a huge revision. I expect I have made mistakes. This revision features new examples and discussion involving mobile, wearables, and Internet-connected smart devices. What has changed greatly is the level of detail: You will find many new sub-principles within each category, along with far more explanation, case studies, and examples. Previous Version & Its Translations. Introduction Effective interfaces are visually apparent and forgiving, instilling in their users a sense of control. Because an application or service appears on the web or mobile device, the principles do not change. I Love Apple, But It’s Not Perfect I’ve used many example drawn from Apple products here, often as examples of bad interface practices. Aesthetics Top Anticipation Autonomy Color Consistency

Les critères ergonomiques de Bastien & Scapin, Partie 2 Introduction Notre premier article sur les critères ergonomiques évoquait les notions de guidage de l'utilisateur et de charge de travail. Nous continuons dans cette seconde partie la description des critères proposés par Bastien et Scapin. 1. Contrôle Explicite 1.1. Lorsqu'un utilisateur est amené à interagir avec un système informatique, il s'attend implicitement à ce que le système lui obéisse. Puisque dans la plupart des interfaces informatiques, l'utilisateur doit avoir le dessus sur le système, il faut que toute action du système corresponde à une demande explicite de l'utilisateur. Concernant les applications automatisées (par exemple la mise à jour d'un anti-virus), elles sont en général automatisées car l'utilisateur l'a demandé à un moment ou à un autre. Note. 1.2. Dans le même ordre d'idées, l'utilisateur doit être persuadé qu'il a le contrôle sur le système. 2. Le critère d'adaptabilité comprend deux sous-critères : flexibilité et prise en compte de l'expérience utilisateur. 3.

Why Consistency is Critical "A foolish consistency", according to Ralph Waldo Emerson, "is the bugbear of small minds". Many developers would agree wholeheartedly with that sentiment — particularly if they’ve had "consistency" forced upon them by over-zealous usability people. Users Need Consistency There is little doubt that consistency is important for users. Consistency makes sites easier to use, because visitors don’t have to learn new tricks as they move around. Sites should be internally consistent: standards and conventions should be established and applied throughout all the content. Sites also need to be externally consistent, that is, consistent with general practice. Consistency Makes Sense Consistency makes business sense. While some developers consider consistency to be a straitjacket, it also has many benefits. Aspects of Consistency Consistency applies to many elements within a Website. Language Is a "twin overhead cam" the same as a "double overhead camshaft"? You should also have a consistent "voice".

10 קישורי CHI בסיסיים עקרונות עיצוב בסיסיים - ברוס טוגנציני (Tog) מציב עקרונות בסיסיים לעיצוב ויישום של ממשקים אפקטיביים, לסביבות ממשק משתמש גרפי מסורתיות או לאינטרנט. IBM – קלות השימוש – האתר של IBM הוא מאגר של מדריכים, רעיונות, גרפיקה, סקירות ועוד משאבים לנושאי אינטראקצית אדם-מחשב ולעיצוב ממוקד משתמש. מדריך עיצוב הממשק מהווה הקדמה פרקטית לנושא עיצוב הממשק, שנכתב ע"י קלייטון לואיס וג'ון ריימן מאוניברסיטת קולורדו. Pourquoi faire confiance à Adviso ? Vision Globale Nos experts multi-disciplinaires travaillent en synergie autour de votre projet Web pour assurer un traitement exhaustif de vos enjeux. Neutralité Nous connaissons les meilleures technologies ainsi que les développeurs Web les plus polyvalents, mais ne sommes liés à aucun d'entre eux. Nous sommes donc les mieux placés pour vous aider dans vos choix. Rigueur Notre méthodologie rigoureuse qui laisse place à la créativité contribue au succès de vos projets tout en assurant le respect des enjeux et des contraintes. Objectivité Nous vous aidons à prendre du recul face à vos actifs et à vos façons de faire et nous vous recommandons la configuration de vos ressources qui maximisera le rendement de vos efforts Web.

Balsamiq. Rapid, effective and fun wireframing software. | Balsamiq Méthode d'évaluation ergo-pédagogique des supports multimédias de formation Méthode d'évaluation ergo-pédagogique des supports multimédias de formation Mounir Sadiq, Mohammed Talbi, El khadir Benichou, Résumé Il existe actuellement une large gamme de supports multimédias à objectifs pédagogiques disponible pour le consommateur individuel ou collectif. Toutefois, peu de méthodes permettent de les évaluer selon une perspective moins technique et plus orientée vers les utilisateurs. Cet article présente une méthode interactive qui sert d'outil d'aide à l'évaluation ergo-pédagogique des supports multimédias pédagogiques (SMP), cette dernière porte le nom de MEEP. Sa conception est calquée sur la systématisation d'une palette de critères ergonomiques et pédagogiques complétés par des critères concernant le multimédia utilisé par le support selon une articulation et une transformation au niveau d'évaluation, contenant des questions structurées par catégories. Mots clés : IHM, Critères ergonomique et pédagogique, Évaluation, Multimédia, Questionnaire. 1. 2. 2.1. 2.2.

15 tools that reveal why people abandon your website Here’s a big problem with web design: If you want to make your website better at turning visitors into customers (or subscribers), you need to understand why most of your visitors are leaving! However, visitors who leave your site come and go without a trace, so how do you know what they wanted? How do you know what would have persuaded them to take action? If you owned a real-life bricks-and-mortar store, this would be easy: You’d hear their objections. Capturing the voice of the customer is more difficult with the web, but it can be done. Track where your visitors came from, and which links they clicked on, using Google Analytics. Web analytics software is essential for understanding your visitors. Despite being free, Google Analytics is surprisingly sophisticated, and it is sufficient for most websites. Recommended Resources If you want to become better at web analytics, we recommend you read Occam’s Razor, Avinash Kaushik’s blog, and his book, Web Analytics—An Hour A Day. An added bonus!

מהו CHI? המונח CHI מייצג את ראשי התיבות של Computer-Human Interaction (לפעמים מוזכר גם כ-Human-Computer Interaction - HCI). זהו תחום החוקר את האינטראקציה בין אנשים (משתמשים), לבין מחשבים. זהו גם תחום עיסוק שמטרתו לגרום למחשבים להיות קלים יותר לשימוש עבור אנשים. זהו נושא רב-תחומי, הקשור למדעי המחשב, פסיכולוגיה, מדעי הקוגניציה, גורמי אנוש (ארגונומיקה), עיצוב, סוציולוגיה, ספרנות ומיידענות, בינה מלאכותית, ותחומים נוספים. בעולם ה-CHI פעילים מספר אנשי מקצוע, שלחלקם תחומי אחריות חופפים. בעולם האמיתי, עבודתו של איש מקצוע בתחום מורכבת מהעיסוקים הבאים: הנה חלק מראשי התיבות והמונחים השכיחים בתחום: בעולם האמיתי, איש מקצוע בתחום CHI צריך ידע יישומי בינתחומי, ניסיון עבודה ומומחיות בנושאים הבאים:

Basics and Implementation of Predictive Collision Detection Few days ago, I wrote a post about why time based animations are better than frame based animations. However, in animations done as a function of time, some serious problems could arise. One of them is that your regular collision detection techniques might fail if the frame rate is lower than acceptable. This problem occurs if you are using basic collision detection techniques like calculating the intersection of object’s bounds per frame. This problem can also be seen even with high frame rates combined with high object speeds. Ordinary Collision Detection If you are not sleepy yet, then let’s take a look on what is predictive collision detection. Pretty simple, the ball bounces back after hitting the platform. (Click on the refresh icon on the embed above if you missed the show.) Predictive Collision Detection (or Sweep Testing) Now this problem can be solved if we get to know about the future coordinates of the ball. Now the collision is perfecto! Share:

Use a single word space between sentences “In the nineteenth century, which was a dark and inflationary age in typography and type design, many compositors were encouraged to stuff extra space between sentences. Generations of twentieth century typists were then taught to do the same, by hitting the spacebar twice after every period [full stop]. Your typing as well as your typesetting will benefit from unlearning this quaint Victorian habit. All white space in HTML, in any combination of spaces, tabs or line breaks, is automatically collapsed to a single word space. If you do need to insert more than a single word space between sentences, or any other characters, then use one of the many space characters available in Unicode.   en space   em space   3-per-em space   4-per-em space   6-per-em space   figure space   punctuation space   thin space   hair space Another method would be to apply the white-space:pre property in CSS to retain the white space formatting.

Related: