archive-com.com » COM » S » SVENNERBERG.COM

Total: 274

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • Design for Clickability | In usability we trust
    don t underline text just to emphasize it Account for color blindness Don t forget that about 8 of the male population are color blind Having something more than just the color to distinguish links is therefor a good idea Not just text links The same thinking goes for other things that are clickable such as buttons checkboxes select lists images etc Make sure that these too actually look clickable For buttons that can mean to make them look like physical buttons with a 3D effect This makes them stand out from the page and look more like physical objects The button on the left could just as well be a banner or a header while the button on the right is begging to be clicked Provide clues Also make sure to provide other clues when the user moves the cursor over the object The cursor itself could for example change to a pointing hand which carries a strong affordance of clickability This happens by default over links in browsers but you could use a little CSS to create this effect on other clickable elements as well Another good idea is to make something happen with the clickable object itself when it s being hovered One common clue is to change the background color This is easily achieved with the hover pseudoclass in the CSS clickable item hover cursor pointer background color ff9 Accomodate for keyboard Some people prefer to use the keyboard instead of a mouse for one reason or the other Don t forget to take this into account when providing clues Links and form elements are easily reachable by keyboard by just tapping the tab key For the user to know which element currently has focus most browsers create a dotted outline around the element That s a pretty good affordance but you could make it even more clear An easy thing that I often do is to make it have the same style as on hover This is easily accomplished with CSS by using the focus pseudoselector clickable item hover clickable item focus cursor pointer background color ff9 Pro Tip If you don t like the dotted outline you can get rid of it by setting outline to none in the CSS Don t forget to design for touch On touch devices there are no such things as a hover It s therefor extra important to make clickable objects look clickable You will also want to make the click area bigger to accommodate for the fat finger syndrome but that s a topic for another article Fast facts Affordance The term Affordance was popularized by Donald Norman in his seminal book The Psychology of Everyday Things He later changed the term to Percieved Affordance since too many misunderstood what he meant by it Actually his latest term for this is Signifiers but that term hasn t gained much traction yet The Percieved Affordance is the properties of an object we understand by just looking at it

    Original URL path: http://www.svennerberg.com/2012/12/design-for-clickability/ (2016-04-28)
    Open archived version from archive


  • Lean Tribe Gathering 12 | In usability we trust
    a whole lot of good practices to the development process of which I think the most important is to bring the customer and the ones actually implementing the code closer to each other Scrum really encourages better communication throughout the whole board UX brings value to the process Allthough Agile is great a delivering software it lacks one important ingredients in creating successful product and services the user That s an area where UX Design can bring a lot of value to the process Great User Experiences doesn t happen by accident They happens because of focused efforts and that means bringing User Centered practices into the mix Agile and UX can definitely play nice together but there are no firm rules or definite best practices on how to do it My talk The talk was recorded and is available on YouTube The presentation is available on SlideShare The Video The Presentation Agile UX from Gabriel Svennerberg About Lean Tribe Lean Tribe Gathering 12 was organized by Lean Tribe which is an organization that encourages discussions about Lean and Agile Articles Agile Presentation UX Previous post CSS in the Head Next post Design for Clickability Leave a Reply Cancel reply

    Original URL path: http://www.svennerberg.com/2012/12/lean-tribe-gathering-12/ (2016-04-28)
    Open archived version from archive

  • CSS in the Head | In usability we trust
    When the user clicks a unicorn a lightbox will open and display a bigger image of it Now the CSS for the lightbox isn t needed for rendering the page It s actually not needed until the user clicks an image Therefore we could include it at the bottom of the page to let other content load first right You know so that the page will render faster Wrong Contrary to common sense it will actually delay the rendering of the page in a lot of web browsers Counterintuitive Behavior But why does it delay the rendering Keeping the browser from downloading it before other content ought to make the rendering faster This is really counter intuitive at first glance but listen to this The browser doesn t want to risk having to re render the page it therefore waits until all CSS is loaded before rendering anything The Rule Fortunately there s a really simple solution to this Just follow this simple rule Include all CSS in the head of the page References Books High Performance Web Sites Essential Knowledge for Frontend Engineers by Steve Souders Online Best Practices for Speeding Up Your Web Site Note This article has

    Original URL path: http://www.svennerberg.com/2012/12/css-in-the-head/ (2016-04-28)
    Open archived version from archive

  • Separation of Concerns | In usability we trust
    to download them more than once You save both bandwidth and rendering time Accessibility By separating the different layers you also benefit the accessibility of the site It s in fact the foundation of Progressive Enhancement and graceful degradation This means that even if the user interact with your site using a less capable device for example disabled JavaScript screen reader old browser you name it it can still access the content because the device can simply ignore the parts it doesn t support and render what it can HTML is the solid foundation of the web By making sure that you keep the content there semantically marked up of course and that neither the CSS nor the JavaScript is in its way you can be sure that every browser on this planet can access your content SEO Web crawlers the evil robots of Search Engines that constantly crawles the web on their endless hunt for content to index is another reason you want to separate the layers A web crawler is basically a blind user It doesn t care about your fancy styles or your crazy JavaScript animations All it cares about is your content your HTML So you better make sure that your content is semantically marked up with valid HTML and that the CSS and JavaScript is out of its way Having done this you re on your merry way towards SEO nirvana A Bad Example Warning Anti Pattern In this example the separation of concerns is violated Both content style and behavior are meshed together in an awful soup HTML a href some url onclick someFunction return false style font size 12px color f00 A bad link a Good Example Good Example In this good example the same thing is done with a clear separation between

    Original URL path: http://www.svennerberg.com/2012/11/separation-of-concerns/ (2016-04-28)
    Open archived version from archive

  • Slide:ology by Nancy Duarte | In usability we trust
    I m not so impressed with it I found it pretty light on substance and I m not sure it has added a lot of value to my slide creating skills The book touches on basic design principles and presentation skills I m sure if you re a design noob that there s a lot of nuggets to be found there but if you have some design skills it s all very basic The format The book is very designed something I quite enjoy and I m sure works very well in the physical book The problem I had was that I read the e book version in pdf format and the square format of the book with lots of design elements made it hard to read I had to constantly zoom in on parts of pages to be able to read the text which made the reading experience less than ideal Summary All in all I think it s an OK book which obviously a lot of work went in to creating If you re a non designer you will probably find useful information that will make your slides better But if you re like me and have some experience in design and creating slides you will find it very basic That said you might still enjoy the design of the book and all the lovely examples in it But in that case I recommend you get the physical book because the e book version is really not adapted for the format Book information Title slide ology The Art and Science of Creating Great Presentations By Nancy Duarte Publisher O Reilly Media 1 edition August 12 2008 Pages 296 ISBN 0596522347 ISBN 13 978 0596522346 Buy on Amazon com Note I wrote this review for O Reilly s Blogger

    Original URL path: http://www.svennerberg.com/2012/08/slideology-by-nancy-duarte/ (2016-04-28)
    Open archived version from archive

  • Mobile Design Pattern Gallery by Theresa Neil | In usability we trust
    s quick to find a suitable pattern I ve read the e book edition and it features beautiful screenshots in full color of different apps along some sketches that illustrate the major patterns Device Agnostic The book tries to be device agnostic and displays patterns from both iOS Android WebOS and BlackBerry which is nice Unless you have all these devices yourself it can be hard to explore how different apps on different platforms have solved a problem A problem with this kind of books is that the evolution of Mobile User Interfaces moves so fast that the patterns and examples risks being outdated pretty fast As I read the book some screenshots already differed from the latest version of the apps About the author Theresa Neil is a User Experience Consultant from Austin Texas She s previously co authored another brilliant book with Bill Scott called Designing Web Interfaces Principles and Patterns for Rich Interactions You can learn more about Theresa on her personal site www theresaneil com Conclusion This is a great book to have when cranking out Wire Frames and Prototypes for mobile UI s You can quickly explore the most common solutions to design problems and also some anti patterns to avoid If you re into the mobile app business I highly recommend you pick up a copy You can see several of the design patterns online at mobiledesignpatterngallery com There s also links to a few chapters that s been published online Book information Title Mobile Design Pattern Gallery UI Patterns for Mobile Applications By Theresa Neil Publisher O Reilly Media March 2012 Pages 280 ISBN 1449314325 ISBN 13 978 1449314323 Buy Mobile Design Pattern Gallery from Amazon com Note I wrote this review for O Reilly s Blogger Review Program Their deal is pretty

    Original URL path: http://www.svennerberg.com/2012/04/mobile-design-pattern-gallery-by-theresa-neil/ (2016-04-28)
    Open archived version from archive

  • Adding Multiple Markers to Google Maps from JSON | In usability we trust
    29 2012 at 11 58 pm The closure does not work for me I see three markers but only Copenhagen displays an infoWindow Can you please post the entire code as one page Reply Gabriel Svennerberg March 30 2012 at 6 56 am You can always check out the code in the Live Demo Here s a direct link to the js file Cheers Reply Corey Bell March 30 2012 at 12 12 pm Thank you I got it to work I think I had the order mixed up Reply Reza Esa April 18 2012 at 7 35 am I m copy your knowledge thanks for info this very helping for me thanks a lot Reply Seamus Campbell April 20 2012 at 9 20 am Hi I m working through your book which is great btw and trying to use the above example However my base code is ColdFusion I have a query from my database which I can convert to a JSON object with serializeJSON However my format is very different from your example and I can t see how to loop over the json object I have Is there a quick way you can see that I can read it or is there another way I should go My json looks like this COLUMNS BUSINESS NAME LATITUDE LONGITUDE DATA sdfdsf Books 36 890408 121 154751 dsdsdsd Booksellers 14 921735 18 602189 fff ints 17 8451823 195 0541819 Any help gratefully accepted Reply Mike Zin April 27 2012 at 12 34 am Thanks for the elaboration clarification I bought your book last year and highly recommend it Reply Gabriel Svennerberg April 27 2012 at 8 41 am That s nice to hear Thanks for the recommendation Reply riemino May 2 2012 at 8 24 pm Thank you The closure portion was all that I was missing for my feature to work Reply Batowiise May 3 2012 at 4 46 pm I bought your book I want to know how to implement this same feature to read a json file instead of what is currently there Regards Reply Pippo mares May 5 2012 at 12 51 pm that s the SOLUTION thanks Reply Pippo mares May 5 2012 at 12 58 pm but what if I want one info window open on page load I have tried to make a infoWindow on page load and it works but when I click on the markers in the json data a infoWindow at page load stays open b once closed it will not display again that maybe because it only display on pageload how can I solve this Reply Junaid Naseem May 24 2012 at 9 59 am I have used code above and infowindow is not working with Stockholm and Oslo I can only see an infowindow after clicking Copenhagen Could you please let me know that what could be wrong at my end Reply BigusJones May 30 2012 at 5 22 pm Thanks for posting this article It s been

    Original URL path: http://www.svennerberg.com/2012/03/adding-multiple-markers-to-google-maps-from-json/ (2016-04-28)
    Open archived version from archive

  • Google Maps Book | In usability we trust
    is the book for The book is for anyone interested in learning how to use the Google Maps API It certainly doesn t hurt if your familiar with HTML CSS and JavaScript but even if you re not you will probably be able to follow along anyway since all the concepts and examples are thoroughly explained The chapters Here s a list of all the chapters in the book Chapter 1 Introducing the Google Maps API Chapter 2 Transferring from Version 2 to 3 Chapter 3 Creating Your First Map Chapter 4 Taking the Map Further with MapOptions Chapter 5 X Marks the Spot Chapter 6 Marker Icons Chapter 7 InfoWindow Tips and Tricks Chapter 8 Creating Polylines and Polygons Chapter 9 Dealing with Massive Numbers of Markers Chapter 10 Location Location Location Appendix API Reference Example code All the example code from the book is available in this zip file Download example code zip file 116 kB Buy the book This book is available to buy from Amazon com You can also buy it as an eBook from Apress com If you re in Sweden you can buy the book from Adlibris com Reviews Dean Farrell Dean Farrell reviewed the book at the North Carolina Digital Collections Collaboratory site in September 2010 All in all I d highly recommend Beginning Google Maps API 3 to those looking to develop Google Maps applications with the new API It s clearly written with lots of examples and pictures of exactly what the code s output looks like Bojan Pejic Bojan Pejic who s a web developer from Serbia has posted a review at his site bojanpejic com in October 2010 He concludes that This is a very good book for those developers who want to learn Google Maps API 3 basics

    Original URL path: http://www.svennerberg.com/bgma3/ (2016-04-28)
    Open archived version from archive



  •