Categories
Design Software

7 Tips for Good UI Design

A good UI design increases conversion rates. That’s simple. But how does human-oriented design play into it? The mobile revolution, as well as the web revolution before it, constantly forced us to keep restructuring and reconsidering what simplicity means for human-centered design and practically every experience we create. In the UI user community, we’ve launched a trend called “human-centered” that helps you focus and lead every design project in a particular way.

There are numerous human experiences associated with using an application. They allow you to take a different perspective towards various projects to see how one solution is better than the other. The best ways of solving problems should be based on human needs. Ideally, you should fulfil those needs in a way that involves best practices and technological innovations.

Our team at ESPEO is working daily to accelerate UX performance at the user interface level, understand how to integrate the project with the UX toolbar and make sure that we create our products in a comprehensive way.

user interface design

Tip one: Let yourself be direct – and stay honest

The rule of thumb is to be direct instead of indecisive. This way, you convey your message with certainty and confidence. Your design presents ideas or products determined to contribute to a user’s success. Leaders don’t end their messages with question marks, using hedging expressions such as “perhaps”, “maybe”, “interested?” and “want to?”. Your UI can be bit more authoritative.

Honesty with a user pays off, so in the whole narrative consider social proof instead of just talking about qualities. Nothing will increase your conversion as seriously as being sincere with the users. Showing endorsements and talking about your offering gives a significant performance for a call to action. Therefore, point towards proof of customer satisfaction via references or testimonials. If numbers are large – consider visualization of the data, as it validates your point in a clear way.
 

Tip two: Conversion – ease of use

A good way of achieving that is simply trying out a one-column layout instead of multicolumn. A one-column layout gives clarity and a more consistent narrative. Users have an easy path to move into a predictable scenario, whereas a multi-column approach moves the users’ attention onto other features. Therefore, there’s a great risk of being distracted from the core purpose of a page. Lead people with plain content and a smooth experience, and, at the end, a visible call to action.

Features of your own design style such as color, depth, and contrast may be deployed as a reliable tool to build communication with a user. With basic elements of specific design, users may be able to follow the fundamental language of navigating in any interface: what can I do, how can I do it? This needs a specific road map containing styles of clickable actions (links, buttons), selected elements (chosen items), and views of plain text. Each style should be easy to differentiate from the other in order to be applied consistently across an interface. This rule, if applied properly, keeps users happy and eager to interact further.

Looking for more Conversion tips? Check out our article: How to optimize your ecommerce page for better conversion.

UI web app

Tip three: Uniting similar functions (merging!)

With every design, it’s easy to repeatedly create similar sections, elements and features which all have the same purpose. It’s the same force for the whole universe: entropy – the disorder and chaos of matter – increases with the volume of information. Uniting similar functions instead of fragmenting the UI will clear out some design complications: remove duplicated functions labelled in various ways, so it doesn’t clutter the content. In a few words, the more UI fragmentation there is, the higher the learning curve is for your users to catch up with. To prevent UI refactoring, the key competence is to merge similar functions together.

Repeating your call to action is a completely different case. Repeating the CTA is a strategy that is more applicable to longer (or wider) content. It can be also repeated across numerous pages. Naturally, users will be frustrated with one item persistently displayed a few times on one view. The wise choice in all the noise is to have one soft actionable element at the top, and second prominent one at the bottom. This is because users reaching the bottom of page seem to pause and consider their next step. So, that division has a great potential to repeat a solid offer or close a deal.

Tip four: Expose the options (have a clear view)

The revolution of pull down menus hides a set of actions which are the proper goal of every page or app. It also introduces the unnecessary effort of searching and discovering functions. All those actions are supposed to be centralized, almost like an app’s ‘spine’, so the scenario of user’s path keeps all the goals in the right order. Clarity and space for content is needed to bring attention to the right places. Possible actions should be visible upfront in an obvious way. On the other hand, the options that don’t need prediction or don’t require learning (as in sets of date and time references), can be placed in menus.

Maintaining the focus on goals is a demanding task for designers. It’s much easier to drown the user with links. It’s easy to create a page with lots of links going left and right in the hope of meeting as many customer needs as possible. If, however, the designer is a true artist, he or she is capable of creating a page with a wide content volume built towards a specific call to action at the bottom. Caution is required at every step, because any link above the primary CTA increases the danger of taking the users’ attention away from established purposes. Users then simply veer into directions they weren’t primarily intended to follow. The mission of lowering the number of distractions like the number of links on a page, and possibly toning down the discovery style pages (a bit heavier on the links) can be achieved with tunnel style pages (with fewer links and higher conversions).
 

Tip five: Showing state and benefit (give the users the tips and feedback they need!)

A nice way of building an understanding between users and designers is an UI with different states of displayed elements (read or unread emails, sent or packed orders). The customer feels secure with the knowledge of an item’s condition. The message about its state must provide the kind of feedback which is expected. It also brings satisfaction for users, as they can establish if their actions were successfully carried out, or if it’s time for the next step.

And here we have another piece of truth: buttons which reinforce a benefit might lead to higher conversions. Users simply know what they want. The designer is supposed to know the action from which the user benefits and put it right on the CTA. It’s all about looking at the ‘transaction’ from the right perspective. The benefit can also be placed next to the CTA, as a reminder why they are about to take that action.

Tip five: Showing state and benefit (give the users the tips and feedback they need!)

Tip six: Gradual engagement

To build interest and gradual engagement, some subtlety is required. Instead of a pushy signup form, there must be some ease of use. The expectation that clients sign up immediately may scare them off. A page or app can be an opportunity to show them the product’s capabilities or a chance for them to perform a task through which something of value is demonstrated. It can build excitement and curiosity alongside initializing interactions.

These actions lead to a personalization of experiences. At the end, the user interacts with your product and sees its internal values. Gradual engagement is really a way of building an understanding of the product or service without conscious acknowledgment. It is a great way to postpone the signup process and prolong the user’s attention through using and customizing the application.

Tip six: Gradual engagement

Tip seven: Recognition to recall

This principle of design is grounded in psychology. Psychologists suggest that when people have a choice, it’s easier for them to identify with something already known and immediately recognizable. To make an experience easier, recognition should rely on hints which help us consider our past experience. Recall requires us to probe the depths of memory all on our own, alternatively, it requires some guidance. This is similar to multiple choice questions on exams – they can be faster to complete than open-ended ones. The challenge with recognition is to give users recognizable items which they have been exposed to before, instead of expecting them to have an idea of their own.

Tip seven: Recognition to recall
Looking for more tips for UX and good UI design – read about UX Desing Trends to watch in 2018!

Categories
Blockchain Financial Services Software

What are DApps about? Decentralized applications explained

In a world where the terms “blockchain” and “start an ICO” are a staple of news in online press, it’s not surprising when something new emerges in that field. Enter a new model for building successful and massively scalable applications. Thanks to blockchain technology (and the massive interest surrounding it), we now have a new type of application called a “Decentralized Application” (DApps). These are sometimes referred to as blockchain applications. So, what are DApps exactly?

What are DApps about?

There are many different explanations as to what DApps are. The term “decentralized applications” isn’t strictly related to blockchain, however, DApps started to be recognized in recent years precisely because of blockchain. Generally, DApps are applications that run on some kind of a P2P network – multiple computers rather than a single one. Think of BitTorrent or TOR as a decentralized applications.
For an application to be considered a blockchain DApp that uses tokens, it must meet the following criteria:

  1. The application must be completely open-source. It must operate autonomously, and with no entity controlling the majority of its tokens. The application may adapt its protocol in response to proposed improvements and market feedback. However, all changes must be decided by consensus of its users.
  2. The application’s data and records of operation must be cryptographically stored in a public, decentralized blockchain in order to avoid any central points of failure.
  3. The application must use a cryptographic token (Bitcoin or a token native to its system) which is necessary to access the application. Any contribution of value from (miners / farmers) should be rewarded in the application’s tokens.
  4. The application must generate tokens and have an inbuilt consensus mechanism (Bitcoin uses the Proof of Work Algorithm).

So, to be clear: in this article, whenever I’m mentioning “DApp/DApps”, I’m only referring to the ones running on the blockchain (so, blockchain applications) and the ones that use tokens.

Blockchain applications? Three types of DApps

The Ethereum white paper distinguishes between 3 types of DApps.

  • The first category is financial applications that run on the blockchain.

These provide users with a way of managing their own money. Bitcoin is a DApp in the first category. Bitcoin provides the monetary system that is completely decentralized and distributed. There is no central authority that controls the money and all the power of managing money resides on the users and the protocol. Users are the owners of their money and they can do whatever they want with that money. Other examples of the DApp from the first category are the various “alt-coins”.

  • The second category are semi-financial applications which mix money with information outside the blockchain.

For example, insurance apps that refund money for a plane ticket if the plane is delayed (Fizzy). The ICO itself also belongs to the second category of DApps. It mixes a token sale with all the crowdsale functionalities for the idea for which the ICO is held.

  • Finally, applications that fall within the third category. These DApps utilize all the features that decentralized and distributed systems have to offer.

These don’t have to be financial at all. Good examples are online voting or decentralized governance (e.g. DAO, decentralized organization). These types of blockchain applications are the most popular ones. Dubai is thinking of using blockchain and building the first blockchain-run government. Another possibility of using blockchain in this category is energy distribution apps. So, the basic idea is that if I have solar panels on my home, and these solar panel produce more energy than I use, then I can sell the excess of power directly to my neighbor.
The classification of the three types of DApps is based on the Ethereum white paper. There’s another classification of DApps out there. You can find it here under Classification of Dapps“.

The difference between DApps and smart contracts

Now that you know what DApps are, you may ask yourself another question. How do these smart contracts you’ve heard about fit into all that?
Smart contracts are programs that are executed and run on the blockchain. A smart contract defines the conditions to which all parties using the contract agree. So if the required conditions are met, certain actions are executed. When I buy tokens on the new ICO, a smart contract has rules written into itself. For example, if the ICO doesn’t raise enough money, all of the money I have invested will be returned to me, or that I cannot transfer new tokens until the ICO is successfully concluded.
DApps (Ethereum based) are blockchain applications where the smart contract is what allows it to connect to the blockchain. The easiest way to understand this is to compare a DApp with a Web App.

Frontend and backend

Traditional web applications have a frontend and a backend. The frontend is all that the users sees when entering a webpage. All of the HTML, CSS and JS are used to display the frontend and are used to connect to the backend.
The backend is where all the mechanics are implemented for the website, for example a database connection and serving the client information about their profile. Java, Python or Node.js are used on the back-end, combined with a SQL database.
DApps are similar to web apps, they may have the frontend (GUI in general) but what differentiates them from Web Apps is the backend. Instead of the Java API and a traditional database, we have a smart contract that connects to the blockchain and contains all of the logic for the application.
As opposed to traditional, centralized applications, where the backend code runs on centralized servers, DApps have their backend code running on a blockchain network. Each operation needs to meet the consensus of the network and is computed on every node of the network. So, decentralized applications consist of the whole package, from backend to frontend. The smart contract is only the backend part of the DApp.

What are DApps – best examples

In this section, I will present some interesting projects and blockchain applications that are built on the Ethereum platform just to show how varied DApps can be.

EtherTweet

From the EtherTweet website: the service provides a basic Twitter-like functionality. As it’s deployed on Ethereum blockchain, it means no central authority has control of what people publish or what they post. As a result, the user has all the control of their EtherTweets.

Etheria

Etheria is a game build on the Ethereum platform. It’s similar to Minecraft but what differentiates it from the rest is that you can purchase all the land tiles for ether. The user interacts with the game by sending commands. Those commands later go to the smart contract which controls the game behaviour. It’s completely decentralized and everyone can interact with it.

Gnosis

Gnosis is a prediction market platform which allows its user to participate in voting for different predictions. The platform offers users a place where they vote on predictions regarding various topics, from the weather to election results.

FirstBlood

A platform which lets users/players challange each other in DOTA2 and win rewards based on the bet or the tournament. FirstBlood offers different tournaments which are listed on the website, where players can participate and win rewards. The platform awards every winner with tokens. As it’s based on the blockchain, every match history is written and stored on the blockchain.

The future of DApps

Blockchain is really a young technology. The Bitcoin whitepaper was released in 2008, and Satoshi Nakamoto mined the first Bitcoin block in 2009. People knew that bitcoin was revolutionary but it took a few years for developers to truly figure out why. They later understood that Bitcoin was built upon a really revolutionary technology – blockchain.
We’re still in the process of understanding blockchain and what we can do with it – and understanding its real potential. Every now and then, more interesting uses of blockchain emerge from the community in the form of a really interesting ICO for a new DApp. I’d never have thought of using blockchain as a mean of distributing energy or for autonomous government projects.

What are DApps compared to the tech of the 90s?

I often compare the current state of blockchain and DApps to the early life of the Web. How we used the WWW back in the 90s and 00s is way different from how we use the web now. Something similar will happen to the blockchain and DApps. Seems like we’re still trying to find the real potential of this technology. In my opinion, many more interesting blockchain applications are on their way. I’m sure we’ll encounter uses that we’ve never thought about. I can’t wait to see what the future brings. And if you’re interested in building your own distributed application or blockchain product, click here – we can help.

Categories
Blockchain Financial Services

Adapting blockchain for business

The intricacies of blockchain technology can still perplex some people. So, how does a business adapt blockchain to its needs? That’s the question I’d like to answer in this article. I’ll start off with a few typical purposes, go through a popular funding strategy (ICO) and finish with some interesting blockchain-based projects.

The interest in blockchain seems to be constantly on the rise. Startups rise and fall on its hype. Corporations spend huge amounts on blockchain-related R&D. Some projects can potentially be disruptive for current businesses and economies.

What can I do with it?

As you might have heard, blockchain is the technology powering Bitcoin. But it’s so much more than just cryptocurrencies! I’m not going to dive into the minute details of how blockchain works. Instead, I’ll tell you about some of its core strengths.

Blockchains leverage modern cryptography, especially private and public keys. You can think of the public key as your username and the private key as your password. Just like a password, a private key should never be shared. This means it strictly represents a particular digital identity and allows each transaction to be signed off. This makes blockchain perfect for representing asset ownership by private key ownership. Assets can be either digital (e.g. Bitcoins) or physical (represented by digital tokens).

What are its strengths?

Think of blockchain as a distributed database. Instead of having a trusted party which controls a single server (as is the case with a traditional database), all the data is present on all nodes and each change is agreed upon by achieving consensus. Strong cryptography ensures that data can’t be tampered with after consensus has been achieved. This accounts for auditability, immutability and verifiability which is required in many applications, e.g. storing healthcare records.

Usually blockchain (e.g. Bitcoin) is a digital ledger, storing account balances and transactions. The possibilities, however, don’t end there, because with the arrival of smart contracts blockchains became platforms for virtually any distributed application. Such a smart contract can model a DAO (decentralized anonymous organization), a crowdfunding campaign or a very specific set of rules for a particular transaction. This way, blockchain becomes a global platform for computation, while maintaining all the strengths I’ve mentioned.

Initial coin offerings

So, you have an idea on how to incorporate a new cryptocurrency into your project. However, you still lack the funds. This is where an ICO (initial coin offering) comes in.

Initial public offerings serve the purpose of raising capital in exchange for ownership in a company. ICOs are similar in purpose but instead of selling ownership a newly launched coin is being offered. What the coin represents is solely up to your business idea, e.g. just the coin itself bought for internal use on the platform (see Humaniq ICO) or a share in organization profits (see vDice ICO).

However, successfully gathering funds through an ICO is not an easy task. You need to invest time and money into a campaign, generate hype and excitement around your product, as well as provide a clear and informative whitepaper describing both the product and the coin. Because of many scams and failed ICOs in the past you need to convince the potential buyers of your coin to trust you with their money. Last but not least, you allocate funds for some development. You need the actual ICO implementation and your position would be stronger with at least PoC implementation of your product.

There’s a lot more to a success of an ICO, make sure you’ve got everything right because you might only get one shot at it. Your business idea is important, but you need to put a lot of effort in if you want to make your new cryptocurrency truly revolutionary. That includes getting the technical part right.

Interesting projects

According to tokenmarket.net, there are 27 open ICOs at the time of writing this article. This shows how many new projects utilizing blockchain are launched on the current market. Some of them are solving really interesting challenges. I’ll describe a few blockchain projects that caught my eye. I’m not going to dig too deep into details, I just want to show you the wide spectrum of ideas where blockchain is applicable.

Ethereum

Ethereum is one of the most successful blockchain platforms for running smart contracts. It has its own internal currency called “ether”. Each transaction, be it transfer of ether or interaction with a smart contract, costs a certain amount of “gas”, which is paid in ether. The initial crowdsale of ether tokens gained around $18m. Ethereum has a vibrant community and many blockchain projects are introduced with Ethereum as their base.

Bancor

The idea behind Bancor is introduction of “smart tokens” which are coins implemented as smart contracts (currently ethereum-based) backed by reserves of other tokens. This allows an instant exchange of tokens with no spread – and at a continuously calculated priced, based on the token supply and demand.

Humaniq

Ethereum and Bancor leverage blockchain for its further development along with the cryptocurrencies world. However, Humaniq’s target is to disrupt the current financial status quo. The project aims at building a mobile bank that requires only a smartphone. It should give access to financial services to people in developing countries, potentially bringing them out of poverty and encouraging entrepreneurship. The ICO was closed at much more modest $5m but the humanitarian aspect of the project can’t be ignored.

Steem

Posting valuable and high quality content to social networks generates revenue for these networks itself. That’s where Steem surfaces – with the idea of rewarding users for generating content, as well as voting for pieces they especially like. This inspires users to contribute superior content. There are 3 cryptocurrencies linked with the project: Steem, Steem Power and Steem Dollars, each of them with its own purpose. The idea is explained in detail in the whitepaper.

ICO

Basic Attention Token

Current online advertising is profitable for the publishers and advertisers. Users are bombarded with an abundance of ads. So, they usually lean towards solutions such as AdBlock. The introduction of BAT ethereum-based cryptocurrency combined with a new browser called “Brave” tries to change this by rewarding users for the attention they pay to the ads, while allowing publishers to buy and advertisers to sell ads. This should result in better targeted ads and less fraud. It’s designed to be beneficial for all parties of the Internet ad business. The idea seemed so attractive for investors that the ICO sold out $35m worth of tokens in 30 seconds!

Your move

Now you know basic blockchain strengths and how to leverage them. As you can see, it has many applications across all kinds of businesses, even though it’s not applicable everywhere. If your innovative business idea includes launching a new cryptocurrency, you can consider an ICO as a source of funding.

Be wary that although the ICO success stories are spectacular, it’s not exactly a breeze. You can always shoot us a message or email if you’re still confused about how to use blockchain for your business. And if you’d like to see how an ICO can be built on the Ethereum platform, head on here.

Categories
Software Technology

How to do Vaadin QA like a Pro using Ghost Inspector

We’ve recently started the development of a Vaadin web application. We were faced with a UI testing problem: how to find the best element selectors for a dynamically generated GWT-based interface. We had two options: to use Vaadin TestBench or Ghost Inspector. Read on to see which one we’ve chosen and why.

Vaadin application end-to-end testing

When you first try to test Vaadin UI, you’ll probably start with Vaadin TestBench – a dedicated test automation tool. It’s deeply integrated with the Vaadin framework, so it appears to be the best choice.

Here’s an example of what TestBench’s tests look like:

As you can see in the example above, TestBench is a Java test framework – you’ll need to know how to code in Java if you’d like to test anything in this case. There is a chance that the dev team will need to create and maintain those tests.

TestBench comes with a Point and Click tool, which you can use for generating UI selectors. When you click an element, it gives you an element selector in Java code, which you can paste to your test code and use for UI assertions. It all works very well when you select standard Vaadin components. When it comes to some unusual widgets or add-ons, you’ll need to do a little extra work to test it, because TestBench by default provides you only with selectors for basic Vaadin components.

If you’d like to keep your tests independent and open a new browser window for each test, TestBench will have some delays with setting up your tests. Even though it allows you to use PhantomJS, it’s still too slow (up to 30 seconds in each test) and that can be annoying. During the test clean-up phase we came across similar problems – responses came a little bit too slowly.

Ghost Inspector

After using Vaadin TestBench for some time, we came to a conclusion that we need to find a better approach. We needed a way which wouldn’t take so much time to write a test and would be easy to use for everyone.

We found Ghost Inspector – a Selenium-based framework provided as a SaaS tool. Its core functionalities are a Chrome extension serving the purpose of a test recorder and a testing dashboard with some cool features. All in all, an easy and less time-consuming tool. That’s what we needed.

Here’s a video:

Ghost Inspector Recorder

The coolest feature of GI is its Chrome extension, called Ghost Inspector Recorder. With GI Recorder, you can record a test and run it within a few clicks.

A Chrome extension mean that QA can use it across all systems which support the Chrome browser, so it’s a plus.

ghost inspector

GI Recorder gives us two possibilities. Firstly, recording operations. This simply translates to storing actions which the user performs while browsing the website. Secondly, you can make assertions of the existence of UI elements and their values. So if you’d like to, for example, test logging in to your website and searching through a list, you just start recording and do what you’d normally do on your website. Then you stop recording and make some assertions on the result. Voila, you’ve completed your first test!

The guys from GI did a great job with their Recorder. As you may know, GWT applications generate the UI from Java code, so there is no static HTML. Ids of elements are mostly something like “gwt-uid-6” and they change often when you add new components. With the Recorder, you can easily generate CSS selectors for those elements. It works better than, for example, Selenium IDE, in which your test probably will fail right after recording, because it has problems with finding good GWT selectors and you’ll need to manually write proper ones.

This way you can quickly start testing your website. If you’d like to do some advanced assertions or customize the recorded steps, you just go to the GI dashboard and then open your test’s visual editor to make some modifications.

test steps

The visual editor allows QA to do some basic interactions with website such as mouseover, click, assign value or even drag and drop. In GI, you can parametrize your tests by variables used in operations and assertions. You can simply set the value, use a random value generator or just import a CSV file with testing data. If this is not enough for you, GI provides JavaScript assertions. With that, you can test almost anything.

QA infrastructure out of the box

Another cool thing about GI is its testing ecosystem. After signing up, we get QA infrastructure out of the box with a user-friendly interface. Besides many features, it doesn’t need any setup from your side. You can record & run your tests in the blink of an eye. So you won’t need to waste your time on setting up every new team member.

Features of the infrastructure which I think are the coolest:

  • Integrations. If you use Slack for your team communication, you’ll love it. Ghost Inspector can send you a nicely formatted message with the results of your test suite run.
ghost inspector

Do you use Jenkins or Travis CI? Go ahead, add GI to your build process. It also provides other integrations, check it out.

  • Screenshot comparison. Every UI element exists and the flow is correct, but your application is, for example, 5x times wider than normal? You can test it with screenshot comparison. GI allows you to set a screenshot tolerance (e.g 10% difference), because you don’t always want to fail your test.
ghost inspector
  • Video recording. I think that without this feature debugging problems would be really tough. Every test is recorded and you can watch any present and past test runs.
  • Selenium tests import and export. You can easily import existing Selenium tests to your GI account, so there won’t be much of a technical cost to move to GI. You can even export your GI tests to Selenium if you’ve changed your mind.
  • Custom JavaScript execution in assertions. Standard assertions and actions are not enough for you? You can use JavaScript to find irregular UI elements or simulate user interactions.
  • Scheduling test runs. It’s really easy to schedule continuous testing with GI. You need to select the day and time. It allows you to run a test from once a week to every 5 minutes. If you’d like to test it less frequently, you can still use Jenkins or Travis CI for more advanced scheduling.
ghost inspector
  • Test customization. Tests can run with different browser access configuration e.g. browser, custom HTTP headers. You can also customize step timing, especially AJAX timeouts. Display options like screen size can also be changed. You’ll love the geolocation feature – run your tests from Tokyo, Mumbai or Northern California in USA.

Test parallelization in cloud

You can run as many tests as you want with GI. By default, they will be run concurrently, which speeds up the process and checks for unwanted test dependencies. This will also allow you to find bugs in more realistic scenarios.

GI allows you to run 30-50 tests in parallel, depending on the current capacity. If you run more than that, they will be queued.

Conclusion

To sum up, it’s easy to start testing with GI. Even inexperienced users should find it very useful. The coolest features are Ghost Inspector Recorder and the infrastructure which speeds up your entire testing experience. Try it yourself and see if it’s for you.