UX has become a bit of a buzz word in the last few years. Seemingly out of nowhere, UX designers started cropping up everywhere over the past five or so years. However, there’s a really good reason for this… All you need to do is look around you to see the vast array of badly designed products and websites. Thankfully, user experience designers are changing things,  designing and creating products that put people first, with the output being usable, useful and enjoyable. For websites, CMS systems have often been touted as the bearers of bad UX, with clunky, out-dated interfaces and little to no consideration of design. However, in recent years, things have started to move forward, with WordPress and Drupal vastly improving their interfaces, and now with Joomla working toward their 3.0 release, they’ve established JUX, a team dedicated to improving the user experience of Joomla in future releases.

We caught up with one of the team leads, Kyle Ledbetter, to find out more about JUX…

Why is user experience so important to Joomla?

UX is the cornerstone of any software. It’s the first and last impression you get while using it. Your experience in using Joomla is how you rate the quality of the software. Even if the underlying software is fantastic, if the UX is poor, Joomla is poor in your mind and your recommendations.

What do you hope to achieve with JUX?

My vision of the JUX will improve the daily lives of all Joomla users: designers, developers (core and community), site administrators. 

With proper standards and a set of UI tools, designers can more rapidly prototype wireframes and flows. With this, there would be little to no testing required or special CSS needed to provide a beautiful and seamless experience in a frontend site design, providing all the extensions are standard.

The community of Joomla developers have always struggled with the tools they have been given in the Joomla API, and end up innovating outside the core, essentially creating their own UI kits. The result is the current disjointed, nonstandard set of component interfaces that all have different design patterns and usability issues. If we all get on the same page with a core library of UI elements (JUI) and a set of best practices, developers can focus on the code and rapidly deploy interfaces, that use standards and have low learning curves.

Whether an administrator is running their own site, their company’s site, or delivering a site to a client, they clock the most time in the Joomla admin. An intuitive interface and logical workflows can lower barriers and increase adoption. From component to component, learning curves would naturally disappear as the UI and workflows become repetition.

I envision JUX iteratively improving 4 Joomla fronts: 

1. Joomla.org (which we’ve just recently redesigned)
2. Joomla Admin Template
3. Joomla User Interface Library (JUI)
4. Joomla Default Frontend Template & Sample Data

Can you explain a little more about the Joomla UI library (JUI)?

As I mentioned, Joomla developers have always faced issues with the available UI library in Joomla, and thus create their own UI islands. We need a core UI library that is continuously improved and evolved for the community developers’ needs. It’s impossible and illogical for the core team of devs to maintain this, so we need contributions from Joomla’s design community. I’d like to model the JUI after great UI toolkits like Bootstrap from Twitter, and possibly start with that set of tools. If Joomla developers have this available, I think we’ll see the amount and quality of components rise dramatically since you won’t have programmers fumbling around with interfaces. You have to remember, most Joomla devs are 2-3 person shops that don’t have a designer on staff!

What would you like to see in the Joomla 2.0 admin?

The focus of the Joomla 3.0 admin will be usability, workflow and customisation. We’re starting with a blank slate and no creative hindrances. How should Joomla look? How should Joomla work? 

We need a modern, flexible UI that honours the Joomla brand but reinvigorates the perception. It’s crazy to say, but this will be the first completely unique admin interface for Joomla’s core. Since 2005 we’ve been building on what we inherited from Mambo. This admin template should certainly be built on the JUI so it’s completely standard with community extensions.

I’m very excited about creating some new workflows around page creation. It’s probably the biggest pain point of Joomla. You currently have to jump from Categories to Articles to Menus to Modules and possible Templates, and each of those things have settings. We need a simple flow where you create a new Page, then pick what type of page it is and what shows on it. From there you can tweak settings, hopefully all in one location.

I’d also like to see the Joomla admin menu surface in the Menu Manager. Joomla has a powerful ACL system now, but is largely untapped in the admin site. We can deliver an admin menu system to offer all the customisations of the Joomla frontend.

I’ve taken my first stab at a Joomla 3.0 admin concept, but we’re also inviting other Joomla template designers to join in and share their concepts. This really needs to be a community effort!

What do you think of the current state of UX across all the major CMSs?

UX is on the forefront of any worthwhile CMS at this point. WordPress has focused on UX for years, improving their UI and workflow with every release. This is why WordPress is deemed “easy”. I believe that now WordPress is more than blogs, they’re hitting some of the UX issues Joomla has, since you’re providing an interface for…everything! Drupal realized their UX shortcomings and launched a community initiative with Drupal 7, and have significantly improved.

We should look beyond our neighbours though. There is some fantastic UX in hosted systems beyond open source, like LightCMS and SquareSpace. Those systems each have a wonderful frontend admin user experience, which could easily rise in importance for the JUX and Joomla 3.0.

Kyle is a Usability Engineer for Ebay, Inc. and UI/UX Designer for Joomla! Follow him on Twitter, or to find out more about about JUX and JUI, head to the JUX site.

I stumbled onto this article this week. I have family and friends who would use the M11 on a regular basis so wanted to check out the details from a tweet that mentioned a crash on the M11. I was surprised by the content of this page so I decided to quickly colour in the various sections of the page as the actual content was surprisingly brief compared to the weight of the page.

I coloured them by:

• Content – [red] – the article that I was actually looking for
• Navigation – [purple] – links to other pages on the site / social links
• Ads – [green] – content that leads to external sites
• Related stories – [yellow] – other news articles on the same site

Here’s a link to the original post – http://www.southendstandard.co.uk/news/9486732.11_car_pile_up_on_M11/?ref=rss&utm_medium=twitter&utm_source=twitterfeed

What struck me as surprising about this was:

1. the percentage of ad content on the page
2. the lack of actual story

I’m not saying that I always have a story to tell and sometimes even I can be superficial when it comes to posting content online, but surely in instances like this where there is a need from the user to view an important news article then that content should take visual priority in some way? Here’s a few thoughts on how news sites could handle this sort of situation.

A simple template for short stories

Reduce the ad space and related article content when there’s only a short piece of information about an event or situation. This would allow the user to see immediately the info that they were after. I’m guessing that an unlikely user journey will be arriving on a page to check out some breaking news only to remember that they’re actually looking for a second hand car and leave the site via a banner ad. Surely we all know by now that user experience and relevancy is more important than ad impressions?

Make news content stand out

We’re used to seeing this happen in reverse such as when you click an image on a blog and the page dims, the image grows and comes into focus. This same method could be applied to all content from external links. This would mean that people who are not used to the layout of your site would immediately be focused on the content that the link they clicked promised them. Having this work on a timer would be acceptable.

There’s many situations on the web where a template simply isn’t used for it’s intended purpose and content management tools sometimes are not able to deal with these scenarios for us. But I do think that web authors need to be more thoughtful about the user.

Feel free to post your own thoughts and solutions to this problem below. Also, any links to blog posts and websites of mine where i’m contradicting myself will be appreciated.

The Design of Understanding is a conference that popped up last year as a bit of an under the radar conference for people interested in the design of ideas. Run by Max Gadney, who led the design team at BBC News Online for a few years, the day features speakers from places like Makielab and Eye Magazine, talking on various aspects of design.

Eva-Lotta Lamm, who has sketchnoted a few conferences for Ubelly in the past, attended the conference last year and will be heading down again this year. “It’s one of these great one day conferences that have been happening in London for a few years now,” she says. “Rather than being a discipline oriented conference (e.g. a UX conference) it brings together speakers and attendees from different disciplines around a topic that is relevant for various disciplines – in this case: How do can we ‘Design for Understanding’?”

Last year featured speakers from the areas of information design, exhibition design, digital design and data visualisation, addressing questions like how we can turn the masses of data collected today into appropriately designed information that generates new insights and real understanding, or the responsibility of the designer to understand the data and its context to treat it appropriately.”

Andrew from the Ubelly team will be heading down on the day to cover the event for Ubelly, so make sure you say hello to him if you see him there. He’ll be tweeting and posting about the day on Ubelly so make sure you visit us next week if you haven’t secured a ticket for yourself. If you have, have you added yourself to the Lanyrd page?

Calling all femme fatales (and gentlemen folk) of digital, web, design, programming and tech!
Over the next three days we’ll be listening in to and watching the Web Heroines Emerge Mini-Conference. This non-for-profit is the brain child brought into being by Keri Lambden, set up to support, promote and inspire women across the interweb stratosphere.

And the innovative ladies over at Web Heroines have a fantastic line up of podcasts, videocasts and webinars, mixing up the multimedia digital style online from the 16 – 18th and concluding the event with a panel of industry bright lights at the British Library this Wednesday evening.

We are loving the Web Heroines vintage inspired design and are very excited to be coming along to the British Library – so come over and say hi! Needless to say the event bags from these design goddesses is going to be a real treat – here’s a sneak preview of some of the goodies they’ve put together for the night: mini stickers, yummy tea and postcards.

Stay tuned to @webheroines and #WHemerge for all the latest updates over the next couple of days – we certainly will!

What technical decisions were hard when trying to satisfy the design / smooth loading / fast response times?

The design called for large lists of data to be available to the user in various pivots/panoramas throughout the application. Designs of this nature typically incur a large performance hit on Windows Phone 7 as list performance on the first version of the software is sub optimal. Choices had to be made about how items would be delay loaded on the device to have the least impact on the immediate usability of the application. We were able to optimise key use cases to  minimise load times without impacting usability. Images caching is another area of the app where we were able to improve performance by moving decoding to a background thread and queuing work items to be processed after initial UI elements are constructed.

How does implementation support the design?

MattJ: Generally speaking, the best designs are based on strong knowledge of the technology platform. Design and strategy cannot happen in a vacuum. As creative technologists, we partner early in the ideation lifecycle with our peers to explore how the platform, brands, and user journeys can be respected and showcased. It’s all about making the brand and experience look like it was meant for the technology. The technology is there to support the pillars of the app experience.

———————————————————————————————————————————————

Build your own app

Been inspired? We’ve put together a step-by-step guide to building a Windows Phone 7 app. You will find helpfull tips, tricks and free downloads to get you started.

Firstly, download the free tools here

Step 1: Designing your App
Step 2: Laying out elements in Expression Blend
Step 3: App styles
Step 4: Adding the glossy elements

]]> http://www.ubelly.com/2011/11/inside-windows-phone-apps-amazon-com/feed/ 0 http://www.ubelly.com/2011/11/cocktail-flow/ http://www.ubelly.com/2011/11/cocktail-flow/#comments Fri, 18 Nov 2011 13:41:50 +0000 Sara Allison http://www.ubelly.com/?p=10328 Application: Cocktail Flow Interviewee: Gergely Orosz, Developer About the team: Developed in conjunction with his brother and team in Hungary. Continue Reading]]>

Can you tell us a little bit about yourself?

I did software development at University but also did a bit of Java, Symbian and C++. I had an awful development experience with Symbian and hated developing with Symbian for mobile. I didn’t like the limitations.

After that we did web development, then .Net and Silverlight. When I heard about WP7 coming out and that I could use my existing skill-set with Silverlight I was very excited about the prospect. They already had the cocktail website, so I had the raw materials available to use for the app. The original Hungarian website, Cocktail Flow was originally built out from a hobby.

The whole development lifecycle for the application was about four and a half months from decision to launch to publish. I didn’t write any production code for the first two and a half months. During this time I brainstormed, looked at videos and tried to get my head around WP7, metro etc.

The app- what does it do well?

It fits well into metro and embraces it.

Does the design reflect the parent site?

I would probably say no. The only thing the app shares with the parent site is the images. The navigation is completely different.

When you started out, the main goal was to create the best cocktail app. Do you think you’ve achieved that?

We researched other platforms and apps and initially thought no way. We looked at metro, existing cocktail apps and we realised we could do better than the best iPhone app. The feedback we have received and the feeling is that Cocktail Flow is the best cocktail app on all mobile platforms. We found it took longer to develop on the iPhone than WP7 and it is not as high level.

We now have an Android app in the works, this has been fraught with development problems relating to the fragmentation that occurs with different handset manufacturers and there is no one fits-all solution.

The plan for future apps will follow the pattern of the prototype on WP7 and then roll out to other platforms. To create the panorama our designer is a believer in small visual elements. With the app, we focused on the detail, custom icons for actions and custom thumbnails. We wanted to make it more alive, more tempting.

The developers had to push the designer to use pivot and for the designer to understand metro.

User feedback on the design

We had good feedback and users like the UI and design. They can use themed panoramas which they change for different occasion, for example, changing the panorama for Valentine’s Day. This is our way of giving something extra to the users and making them feel like the app was worth the money.

The feedback from version 1.0 was that there were not enough recipes, how was this addressed?

We decided that although it is easy to add more recipes, adding more images increases the app size. An app over 20mb cannot be downloaded via 3G. Therefore, we wanted to keep it under this limit for a better user experience ‘on the go’.

So we created dynamic cocktail packages, like in-app purchase but for free. Additional downloads but no charge to augment the existing content. This also has the added effect of refreshing the app remotely and adding new cocktails drives downloads.

We made an important change to the panorama about a month ago. We changed the look and feel of the settings section. We did this by not making it as colourful but more subtle as to indicate it is not as important as the other sections.

Is having design guidelines a good thing?

Yes, when we started developing there weren’t as many guidelines. Since they have been updated this has been a lot better.

Do you think there is enough design differentiation between applications?

Metro – people love and are caught by the design and are then surprised by what the functionality offers.

Do you have any tips for fellow developers/designers?

Have a strong set of functionality and then invest heavily in design and user experience.

Build your own app

Been inspired? We’ve put together a step-by-step guide to building a Windows Phone 7 app. You will find helpful tips, tricks and free downloads to get you started.

——————————————————————————————————————————————

Firstly, download the free tools here

Step 1: Designing your App
Step 2: Laying out elements in Expression Blend
Step 3: App styles
Step 4: Adding the glossy elements

Tomorrow marks the 3rd year of Full Frontal Conference, organised by Remy Sharp and the Left Logic crew down in Brighton. We’re sending Mr Beeby down there to cover the conference for us, so make sure you say hello to him if you see him (he’ll be sporting his Mario style mo, I believe). Ahead of tomorrow, we caught up with Brendan Dawes, who’ll be speaking at the end of tomorrow. Brendan is a force in the design world, and having seen him speak earlier this year at New Adventures, I know you’ll be in for a treat.

Give us a brief rundown of your talk at Full Frontal

I’m a geek; I have a thing for pencils and stationery; I make things from Altoid tins and bits of electronics; and I love to play around with bits of tech in all shapes and sizes. But for these things to move things on – to have an impact – these experiments need to be published to a wider audience beyond the world of the geek; they need to used in a real-world sense rather than in an experimental context. I’ll be showing how mN created some work for Arup using HTML 5 technologies that is now being developed as a real world application.

Sometimes it can be hard to get a client to take a bet on new technologies. What advice would you give people who are trying to pitch experimental projects to clients?

It’s not about the technology but about what you’re trying to deliver and how you’re trying to communicate, and the best tools for the job. With the Arup project we wanted it to be used on many devices including the iPad and iPhone. Arup understood that it needed to be ubiquitous so as many people as possible could use the thing mN are now making. Make a a good case for it and good clients will back you up. The thing is, risk is sexy; I don’t care how corporate some companies may seen but everyone secretly wants to be Dirty Harry; tap into that notion and that’s half the battle one.

I know you’re passionate about UX and UI design. Could you elaborate on what you think the impact that the current buzzword technologies (and future ones) will have on the area?

I’ll be honest with you I have no idea what UX is. All I know is how to make something that resonates with people in various ways, whether that’s getting a job done or making someone smile. All I care about is designing objects that have the capacity to be loved. New tools can sometimes help you do that and certainly create new opportunities to explore, but ultimately everything comes down to that.

Beep seems to revel in making real things that are beautiful, functional and fun real-world objects. What can people who design and build for the web learn from the world of real objects?

Well it’s a little strange maybe to say this but I consider the web to be real objects in some ways, even more so the mobile web / apps. The experience of using an app or the mobile web is a vastly more intimate, personal experience than staring into a screen on your desktop; you’re holding this thing in your hand as you navigate, so the feel of it it completely different. To me these things feel in some ways more analogue than digital because of that. Design is often – though not always – about context so the context of holding this object in your hands changes how you design something for that object; how does it appear on screen, how does it move from one state to the other etc. These transitions are a universal design grammar that sits across all well designed objects, and that thinking can inform the making of a digital object just as much as a physical one.

Brendan recently set up Beep Industries, a shop that specialises in making “products free of unneeded features that celebrate the beauty of simplicity. Simple objects that strip away the unnecessary yet keep the necessary; unquantifiable things such as charm, joy and playfulness — the kind of qualities that make you fall in love with something.” Head over to their site to check out their latest products, MoviePeg, POPA and MIXA (All of which I’m a little bit in love with).

Icons

One of the 5 high level principles behind the Windows Phone design language, Metro, is the celebration of typography in the phone’s UI. A great deal of time and effort was spent on optimising the font for display on the phone and on making sure that not only the letteres but also the numerals are displayed beautifully.

To compliment the font, Segoe, a set of icons have been created and if you have already installed the Windows Phone SDK, the icons are on your machine waiting for you to include them in your application, most likely, here:

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons

There are also some PSD files of the icons available as part of the Design Templates for Windows Phone 7 for you to use. One aim of supplying icons for use is to help developers on their application development path, another aim is to provide users of your applications a sense of familiarity when using your apps. If a user sees the same icons in the same context with the same meaning in the phones UI and in your applications, then they don’t have to re-learn the meaning behind those icons. They already know what they mean.

However, there are times when there isn’t an icon available to you and you will need to create one of your own. In those instances, try and keep to the style of the set in the SDK. For pictogram inspiration, take a look at the video below.

Following from the previous post Laying out elements in Expression Blend….

Within the element menu styling is referred to as applying a resource Edit Style > Apply Resource:

Resources can be as raw as a simple colour brush or comprised of many individual resources to form the specific properties you require for your application.

There are core resources which are default to expression blend and specific to the Windows Phone UI, particularly with regards to text/link styling.

Any custom resources created should be based around defaults that already exist, this ensures continuity between applications and core requirements such as ensuring buttons are clickable and have appropriate padding to accommodate a touch screen interface.

Resources can be element specific, control specific or application wide. Colour brushes are an example of a resource that would be applied application wide, you would generally create brushes for the colour palette of your app. These will then be applied to custom resources throughout the application to ensure that, for example, if you modify the red used within the design then all styles are updated with the new colour automatically.

This works very similar to a CSS style sheet where you may use various classes on a div tag to create the desired styling.

The obvious correlation with CSS is the ability to change the look and feel of the application by modifying resources rather than each element individually.

Download the free tools here

Step 4: Adding the glossy elements

It’s not just developers that get all the cool platforms to play around with. When designing for Windows Phone designers also have their own superb UI design tools in the form of Expression Blend.

The Windows Phone developer tools easily allow a clear separation of design and development responsibilities by allowing the developer to create the logic code in Visual Studio and the designer to concentrate on UI design using Expression Blend. These two tools share the same file structure as well as actual source files. Expression Blend uses XAML for UI design which is consumed by Visual Studio and allows the developer and designers to work seamlessly together in real time.

Placing controls into an app and binding data to these controls couldn’t be easier in Expression Blend. Simply select the type of control you wish to add from the toolbar on the left hand side menu, in this instance a TextBlock…

Add the control to the stage and position accordingly.

Controls can have dynamic elements bound to them; these can be as complicated as animated behaviours but in their simplest and most obvious form can be data bound to a TextBlock.

This will require some cooperation from a developer but once the data is present it is a simple process to link to any control.

Select the element on the stage and go the ‘Common Properties’ panel on the right and click the small white box next to the text property and select ‘Data Binding…’ from the corresponding list…

You will be presented with a window containing all the dtat set up by the development team, just double click on the required sample, done.

Designer tip:
It is easy in Expression Blend to be caught out by copy wrapping issues so ensure you test with extreme sample data to ensure your pages are always presented correctly.

Download the free tools here

Step 3: App styles

Step 4: Adding the glossy elements