How do you solve the problem of UX

It focuses on having a deep understanding of people or users, what they need, what they value, their abilities, and also their limitations.  It also takes into account the business goals and objectives of the group managing the project. UX best practices promote improving the quality of the user’s interaction with and perceptions of your product and any related services.
Thats the basic principles of what UX is all about but more so now in 2017 it’s a little bit more creative take for instance this article written in inVision blog https://www.invisionapp.com/blog/ux-design-trends-2017/  and what Raffaella states and I quote

“The growing area of user experience design is an opportunity for a complete mindset shift for companies—away from selling products and towards selling experiences. It’s the best way to build a sustainable competitive advantage.”

So with that in mind let me explain some things that you should take into consideration before you start that user journey.
1: Understand the underlying factors before attempting to solve them 
Your work should have purpose—addressing actual, urgent problems that people are facing. Make sure that you can clearly articulate the core of the issue before spending an ounce of time on developing the design. The true mark of an effective designer is the ability to answer “why?”.
2: Keep it simple and intuitive
The things you create should be easy to use, easy to learn, easy to find, and easy to adapt. Intuition happens outside of conscious reasoning, so by utilising it you are actually reducing the tax on people’s minds. That will make them feel lighter and likely a lot happier.
3: Acknowledging user needs
What’s obvious to you isn’t necessarily obvious to someone else. There is a very small likelihood that the people you are designing for have all the distinctive qualities that make you you. Don’t assume you innately understand the needs of your customers. How many people do you think truly understand what it feels like to be you?
4: Empathy
Step outside your box and try really hard to understand the world from another person’s point of view. Go out of your way to identify with their needs. If certain things just don’t make sense to you, ask more questions. Ask as many questions as you need to until you finally understand. When you really get what makes people tick and why they do what they do, you’ll have a much easier time going to bat to make their lives better. If you aren’t trying to make people’s lives better, what are you even doing here?
5: Present few choices 
The more choices a person is presented with, the harder it is for them to choose. Remove the “nice to haves” and focus instead of the necessary alternatives a person needs to make in order to greatly impact the outcome.
6: Provide signposts
Never let people get lost. Signposts are one of the most important elements of any experience, especially one on the web where there are an infinite number of paths leading in all directions. The design should keep people aware of where they are within the overall experience at all times in a consistent and clear fashion. If you show them where they came from and where they’re going, they’ll have the confidence to sit back and relax and enjoy the ride. This is of great importance when it comes down to a storefront.
7: Efficiency
Efficiency allows for productivity and reduced effort, and a streamlined design allows more to get done in the same amount of time. Creating efficiency demonstrates a great deal of respect for your customers, and they’ll be sure to notice.
8: Reversible actions
There is no such thing as a perfect design. No one and nothing can prevent all errors, so you’re going to need a contingency plan. Ensure that if people make mistakes, they are able to easily fix them. Undo is probably the most powerful control you can give a person.
There are I’m sure many more issues that we as designers need to address but I want to move on swiftly to the physical aspect of UX design and that is the usability testing having gone through your tick list now it’s time to put them into practice testing out the journey and ironing out the wrinkles and that includes the information architecture and see if the design adhere’s to that gateway and the functionality in both the journey and design are glued together in one single unit.
lets take a look at an example of that not working and then one that is working and to kick it off Tom Geever at http://tomgreever.com/
Tom had an experience like many of us with his tax returns with TurboTax.com and heres what he said

“On Monday, I went to TurboTax.com to work on my taxes. As you can see, the “Watch our Super Bowl ad” panel demands visual attention while the “Start” or “Sign In” buttons below are not accessible. I wasn’t here to watch the ads again. Further, watching super bowl ads is not the primary use case for users of TurboTax. I know their intent: they were prepared for the people who want to watch the ads again, but why should they do it at the expense of users who want to pay them for their service?”

6fdb75fd-ee83-42ed-b3b2-8d78151f595che ends with a solution

“The simplest solution to this problem is to not disable the buttons below and remember when the users have hidden the panel. But I would prefer they make the ad panel much smaller or have promoted a different landing page url during the game.”

Remember rule 3 seems that this site forgot that rule .
For a good example I’ll go back to Alpaka (I know I used it as a good example for my UI article but the reasoning built into the UX apply’s here)
With Alpaka the site is just a single page set up so all the ux principles are built into that area which is difficult to get right from the journey prospective but somehow it works because of clever use of colour, drag and drop elements and pop ups when called to action. Ok so thats UI I here you cry but if you let me explain that each function results in a action that is implemented and thus creates a journey that is tailored to the users needs and thus all or at least some of the principles I set out earlier work really well and without even realising it Phill has managed to incorporate the principles Raffaella mentioned earlier, that of the selling of the experience rather than the selling of the product take a look on the video produced earlier on the UI article or here

UI whats it all about

Screen Shot 2017-05-02 at 12.58.19The user interface (UI) is everything designed into an information device with which a person may interact. This can include display screens, keyboard, a mouse and the appearance of a desktop. It is also the way through which a user interacts with an application or a website. The growing dependence of many companies on web applications and mobile applications has led many companies to place increased priority on UI in an effort to improve the user’s overall experience. 
Armed with this information how can the designer create an effective interface? There are many new and exciting ways of creating this, VR being one of them but lets not get carried away by advancements in technology as this can have adverse effects on your judgement and those can create some epic disasters for instance lets look at the Apple watch interface as an example…… There are eight different ways to interact with it: Turn or click the knob on the side, tap or hold the side button, tap the screen, hard-press the screen, swipe across the screen and pinch the screen. Worse, the watch’s interface requires learning a mental map of the tiny watch screens laid out like an inverted T. Recent notifications appear as a vertical scrolling list, but “glances” (display screens for stocks, weather, battery charge, steps taken and so on) are arranged horizontally. There’s no logic to these layouts.
It’s easy to bang on about UI in such a tiny space so lets look at a desktop UI to compare it with…… Windows 8. The trouble wasn’t that Microsoft’s designers couldn’t design a good operating system interface; it’s that they designed two of them. Windows 8 had one environment for keyboard/mouse and a second, overlaid interface for touch screens. Each had a separate Web browser, Control Panel, e-mail program and type of programs. You couldn’t ignore either one. Twice the learning, twice the confusion—and people hated it. Microsoft ditched that approach in Windows 10.

Ok so if that was just what is good?

From my point of view until the technology is here to do things differently i.e. VR and AR, we should leave well alone (don’t dismiss it because it will be good it’s just not here yet) . So lets concentrate on what we have here already and build on that, and again I must emphasise on the design of your average user interface and the importance of keeping it simple and some key factors adhered to.
1: Clarity 
The first and most important part of any interface. To be effective the user must be able to recognise what it is, care about why they should use it, and then interact with it successfully. While there is room ambiguity and delayed gratification, there is no room for confusion. Clarity inspires confidence and leads to further use. A clear screen is better than a cluttered one.
2: Interaction
Interfaces are there to inspire, evoke, mystify and intensify your relationship with the world, this is not art, this is a way to mange our expectations and give us access to services with clarity.
3: Conserve Attention 
Don’t litter your screen with unnecessary distractions remember why the screen exists in the first place. Keep your primary goals front and centre.
4: User control
This is important, for example when you are doing something, anything you have some measure of control, the same should be with the interface. Unplanned interactions can lead to confusion and cause surprising outcomes like the user leaving your site or application (example pop up modals, too many and the user will leave).
5: Small Footprint
Design the interface with as little a footprint as possible. It’s easy to add more layers than necessary, we’ve all done it but recognising as much natural human gestures enables the user to interact with the objects in focus the less cluttered the easier it is.
6: Primary actions
You should support only one primary action per screen this makes it easier to learn and use, easier to add to or build on.
7:Secondary actions 
Do exactly what it says on the tin “Secondary”. You can add many secondary actions but remember the user didn’t come here to add the site to Facebook, he or she came here to get a service that the company whose site or application it is provides.
8: Natural next step
Very few interactions are the last so design a next step for each interaction, anticipate what that should be and design and support it, don’t leave the user hanging, a natural next step helps to further achieve a goal.
I could go on but I’m sure that this would be detrimental to this page and I want to show some example of good design, so heres a link to a great article on this subject 
Tobias van Schneider 
The most important reason is to “get to the point”.
Combined with a simple line-drawing icon, the app delivers such charming insights as “it’s fucking raining now” and “freezing cold like a fucking fridge”, set large in Akzidenz-Grotesk – fulfilling another of van Schneider’s goals, to show off the classic “more beautiful than Helvetica” typeface. Swipe up to share; swipe down to look at tomorrow or the day after; and pinch to show the temperature. And that’s it.
This is simplicity at it’s best no distractions I’ll even agree with the typeface chosen and it delivers a somewhat tongue in cheek response to the users query.
Ok that is an app but for a fully responsive application lets take a look at Alpaka.
So what is this I hear you cry ……. Well let me explain (and I think all will recall excel sheets), this is similar to excel and we can all recall how complicated that application can be, heck you might as well join up to NASA and complete a course in astro physics is how I would describe it (no offence Microsoft). Cut a long story short everything had to be done manually, even the formula for adding up or subtracting, a complete nightmare unless you knew how to do all that and even then it could take up several hours in the day. Not anymore this app will do just that in a few clicks and this is down to the clever way that the UI has been built cutting out complicated scenario’s and grouping interactions together.
So what is Alpaka ?
Alpaka is a real-time collaborative employee scheduling, absence management, timesheets, expenses and client billing application (their words not mine) built into cloud and works like a calendar.
The main functions are laid out at the top of the screen using a simple icon set to delegate each function which is simple to read rather than a plethora of buttons (note I find that using icons is a cleaner and faster approach to navigation rather than the button array that was used in the past this is taking from software like Adobe or Office literally and the user can relate to this more easily).
As we go into the screen (this is a single screen application) we can see a list of names along the left side of the page with a bunch of buttons that expand out, all relating to the icon set on the main navigation which gives you a primary array so that you don’t need to use the main set which is now secondary (note how the use of colour denotes that with a drop down colour chart to emphasise teams).
Let Phill explain more in-depth the functionality and watch and see how easy the UI is to use and note that there is no clutter and if there is then that can be hidden away until you need it.

Which is best Adobe Illustrator or Bohemian Sketch

If you haven’t been watching or if you were out making tea in the last few years, there have been some graphic and web design challengers who have dared to encroach on Adobe’s domain. Perhaps the most formidable competitor is Sketch, which top design professionals at Apple, Facebook, and Google have used and prefer as an all-in-one tool over Adobe Illustrator and Photoshop. Sketch is also an invaluable application for user interface and user experience design.

Here lets make a comparison between the two (thats Illustrator and Sketch)

Adobe Illustrator

You’d expect Illustrator to be the best for illustrations because, well, it’s in the name and is what Illustrator is primarily for. It may not have the versatility of Sketch, but it does at least one thing best without a doubt.

Designers primarily use Illustrator for digital illustrations, logos, infographics, posters, business cards, and more and it supports 30 plus file types plus it runs on both Mac and PC with consulate ease.

Illustrator has always been my go to programme when polishing up my sketches for characters, Icons even product shots works seamlessly with Photoshop and inDesign to get a real quality finish on all things print and a lot in-between. But there is a sticking point on the Adobe product? it isn’t all that when it comes down to creating for web. Now don’t get me wrong I’ve designed screens in Illustrator then transferred them to Photoshop for the dev teams to work on as an easier and quicker way of producing the screens instead of doing all the work in Photoshop, but I find building Icons of general graphic work suits this piece of software down to the ground but not for large web based jobs.

Try out : http://www.adobe.com/uk/products/illustrator.html?mv=search&s_kwcid=AL!3085!3!75268148330!b!!g!!adobe%20illustrator%20free%20trial&ef_id=WOuTfQAABIaLc47F:20170427144905:s

Sketch

Ok so compared to Illustrator Sketch is firstly cheaper with a one off payment rather than a monthly subscription.

Sketch goes far beyond creating digital illustrations. It’s also an amazing tool for user interface design, italso beats Adobe on product design because you can use it to create quick mockups of interface flows. It can repeat elements so you won’t have to do lots of copy and pasting.

Lastly, Sketch is still great when it comes to drawing. In fact, some prefer doing illustrations in Sketch over Illustrator. Now you may think “but you said you prefer Illustrator?” I did but yes you can do just about anything in Sketch it’s just a little tricky when it comes to the drawing element and that would be my reason to choose the former over the latter.

But saying that Sketch has built-in tools that automate file exports, which are usually time-consuming and tedious. This means Sketch will have an easier time making content available for multiple devices.

The downside is If you’re a Windows person, sorry because Sketch is Mac based  in fact it’s so new, there aren’t as many ways to learn it. There are some quality online courses and tutorials, but the quantity does not compare to the learning resources for Adobe and compared to Illustrator, Sketch has limited support for SVG, EPS and PDF files.

Try: https://www.sketchapp.com/

so which one would I choose ?

BOTH each has it’s own qualities but I use sketch to get those wireframes made on time and within budget and build quality Icon sets via Illustrator it’s the best of both worlds .

Thanks to http://www.skilledup.com/individuals for references

Wireframe tools

These tools make the process of knowing how an app or website works fundamentally easier, by visually stripping the product down and allowing all involved to focus purely on functions and user interactivity.

Clients need to understand how your proposed app or website will work. But simply explaining to them verbally or in writing leaves the vast majority of functions down to their imagination. Wireframe tools can be extremely helpful in squaring that circle.

ref: http://www.creativebloq.com

There are a few that I have tested and used in the past and here are a few that I would recommend.

1: UXPin

Pretty easy drag and drop system and is updated on a regular basis  from bootstrap, iOS and Android. You can easily convert them to hifi mockups and it does include animation and interactivity within the prototypes.

try it out : https://www.uxpin.com/

2: Axure

If you want all singing and dancing then this is the kiddie. Not only can you build your mockup you can create an interactive prototype …….. does it stop there …… no way jose this piece of software allows you to create sitemaps, provide UI elements and then output to html for both web and app pretty cool huh.

try it out : https://www.axure.com/

3: Justinmind

basically a shortened down version of Axure has the same range of UI elements an easy to use animation toolkit, custom styling (you can round edges, crop images or add gradients).

Then you can export it to html. My only concern is the complexity of the feedback, for example FAQ’s are not up date and when you email them the response is slow other than that this is a little gem that not a lot of people know about.

try it out : https://www.justinmind.com/

4: Pen and Paper

Yes the best form of wire framing is still pen and paper sketch out those ideas showing the routes you want the end user to take and the client can see how it works with a deal of interaction between both parties to solve that problem

I’ll add more at a later date as I test them out

Thanks to http://anythingnet.com.au for the use of the image

Ok just when you thought all was done BOOOM Axure brings something new out and that is that you can edit SVG’s within the software now that is pretty freakin awesome that means I don’t have to go back to sketch or illustrator to make changes this is what they said

“If you don’t convert an SVG, it’ll remain in the SVG format in your HTML output from Axure RP. If you do convert it, you’ll then be able to modify the resulting custom shapes by changing their colors independently, adding new anchor points, applying transforms, and doing any of the other cool stuff you can do to custom shapes in Axure RP.” 

read it here : https://www.axure.com/blog/can-now-edit-imported-svgs-axure-rp/