Tutorials

Tutorials about HTML, CSS, PHP, Javascript, and Photoshop

  • Home
    Home This is where you can find all the blog posts throughout the site.
  • Categories
    Categories Displays a list of categories from this blog.
  • Tags
    Tags Displays a list of tags that has been used in the blog.
  • Archives
    Archives Contains a list of blog posts that were created previously.
  • Login
2748

Preview: 70 Line Icons (Free PSD)

This set contains 70 simple line icons that are perfect for use in websites, web apps, and mobile apps.

The icons were handcrafted using Photoshop vector shapes so that each icon can be resized and modified with ease.

This icon set was designed exclusively for the Six Revisions community.

License: Public Domain

This freebie is free of any copyright restrictions under CC0 Public Domain Dedication. You can use, sell, modify, and distribute this freebie, all without asking permission.

Download

Related Content

About the Author

James Lynch is a designer by profession. He works at Artfulclub, a design blog.

The post 70 Line Icons (Free PSD) appeared first on Six Revisions.

Continue reading
0
3013

Date and time manipulation is an unavoidable part of programming; there will inevitably be a part of a project that requires a date to be modified. While, on the surface, echoing a date in the future brings a small bit of accomplishment, it can be quickly eradicated when one is tasked with manipulating that date.

Without being aware of the arsenal of tools PHP provides you with regards to working with dates, you might find yourself writing kludges that convert strings into timestamps for various comparisons.

Today we’re going to dissect the PHP DateInterval class, a power tool for dealing with dates in a web app.

But before learning about the DateInterval object, one needs to first understand what an interval is.

What is an Interval?

Simply put, an interval is a duration of time.

When we converse about the topic of duration, we wouldn’t say, "Honey, I’ll be home on Dec 3rd, 2015 15:19pm".

Instead, we would simplify and say "I’ll be home in 5 minutes". Although this is ideal when conversing with another person, this is not so great as a data construct.

So how do we define "in 5 minutes" for a web app?

Fortunately, there’s an ISO for that.

ISO 8601 is the international standard that defines how to use, store, and transfer date, time, and duration information.

The specific string to define durations is an easy-to-remember pattern:

PYMDTHMS
  • P: period
  • Y: years
  • M: months
  • D: days
  • T: time
  • H: hours
  • M: minutes
  • S: seconds

Except for P, each designator is optional.

Immediately preceding each designator is the quantity of time you want to store.

Below is a table showing samples of different date and time ranges:

String Equivalent to…
P1Y 1 year
P1M 1 month
P1D 1 day
P30D 30 days
PT1H 1 hour
PT5M 5 minutes
PT35S 35 seconds
P1Y6M29DT4H34M23S 1 year, 6 months, 29 days, 4 hours, 34 minutes, 23 seconds

Creating a DateInterval Object

Now that we understand what an interval is — it’s simply a duration of time — and that ISO 8601 defines our duration’s format, we can start playing around with the PHP DateInterval class.

Let’s define a predictable duration, create a DateInterval object, and output the result to the screen.

We’ll start with "1 year, 2 months, 3 days, 4 hours, 5 minutes, 6 seconds".

$Duration = new DateInterval( "P1Y2M3DT4H5M6S" );
print_r( $Duration );

Result:

DateInterval Object
(
[y] => 1
[m] => 2
[d] => 3
[h] => 4
[i] => 5
[s] => 6
...
)

You will notice that the constructor for the DateInterval class has parsed your duration and stored the individual values in its own properties. $Duration->y matches the 1Y from the duration string you passed in.

Let’s try another more practical duration: 1 month. You’ll notice that any undefined durations are automatically defaulted to 0.

$Duration = new DateInterval( "P1M" );
print_r( $Duration );

Result:

DateInterval Object
(
[y] => 0
[m] => 1
[d] => 0
[h] => 0
[i] => 0
[s] => 0
...
)

So now we know what’s happening, but what do we really have? What’s so great and tangible about this?

The real benefit to what we have here is that the $Duration object itself represents a duration of time. We don’t need to know a source or destination date; $Duration is simply 1 month.

Note: It’s important to note that creating a DateInterval with 13 months (P13M) will not roll over and provide you with "1 year 1 month".

That makes sense because we don’t have a source or destination date. Imagine the case of 61 days:

  • On October 1, it’s 2 months
  • On December 1, it’s only 1 month and 30 days
  • On February 1, it’s 2 months and 2 days (or only 2 months and 1 day on leap years)

Manipulating Dates with Durations

Durations tame the manipulation of PHP DateTime objects.

The PHP DateTime class has three methods that work with a DateInterval object:

  • add
  • sub
  • diff

Both add and sub will modify a DateTime object by a DateInterval, while diff will compare two DateTime objects and return a DateInterval.

$Now = new DateTime();
echo $Now->format('Y-m-d'); // 2014-06-12

$Duration = new DateInterval('P1M'); // 1 month
$Now->add( $Duration );
echo $Now->format('Y-m-d'); // 2014-07-12

$Duration = new DateInterval('P2M'); // 2 months
$Now->sub( $Duration );
echo $Now->format('Y-m-d'); // 2014-05-12

In the above example you can see how date manipulation becomes much easier and more predictable by using DateInterval objects to modify DateTime objects.

The diff method is just as easy to use, but provides an extra piece of information: total days. This is important because when using the DateTime object to find a difference, we have a source and destination date, and therefore we can reduce the units of time into larger denominations. However, having the total number of days in between is a valuable piece of information.

$Year = new DateInterval('P1Y');
echo $Year->days; // 0

$Date1 = new DateTime();
$Date2 = new DateTime();
$Date2->add( $Year );

$Difference = $Date1->diff( $Date2 );
echo $Difference->days; // 365

Reading Durations and Extracting Intervals

There are inevitably going to be times where you want to extract portions of the stored interval (much the same as you would a date).

The DateInterval class has a handy format method. PHP docs has a table for the format method that is a useful reference.

You use the format method like this:

$Duration = new DateInterval('P345D');
echo $Duration->format('I am %d days'); // I am 345 days

Note: It’s important to note, for those familiar with the strftime method, that the recognized characters are completely different. For example, the DateInterval::format method interprets %a as total days while strftime interprets it as a textual representation of the day (i.e. "Sun").

Oddly enough, DateInterval doesn’t natively have a way to extract the entire interval spec without the zero values. This leaves you with two options:

  1. Extract it with 0 elements, which is perfectly acceptable
  2. Extend the DateInterval class

The second option, extending the DateInterval class, brings upon it’s own difficulties that we won’t touch on here today.

To extract the interval spec with the 0 elements intact, you can use the same format method like so:

$Duration = new DateInterval('P345D');
echo $Duration->format('P%yY%mM%dDT%hH%iM%sS'); // P0Y0M345DT0H0M0S

If you want to confirm the above, simply create a new DateInterval with the result of the first:

$interval_spec = 'P345D';
$Duration1 = new DateInterval( $interval_spec );
echo $Duration1->format('%d'); // 345

$interval_spec = $Duration1->format('P%yY%mM%dDT%hH%iM%sS'); // P0Y0M345DT0H0M0S
$Duration2 = new DateInterval( $interval_spec );
echo $Duration2->format('%d'); // 345

You should now have a grasp on using the PHP DateInterval class, and it’s capabilities.

Hopefully you’re able to apply this current and future web app projects.

Related Content

About the Author

Bradley Holbrook is a senior software developer for Click4Time Software Inc. He has been designing and developing web applications for over 15 years. Connect with Bradley via This email address is being protected from spambots. You need JavaScript enabled to view it. .

The post An Introduction to the PHP DateInterval Class appeared first on Six Revisions.

Continue reading
0
2860

Poka-yoke is a Japanese term that means "mistake-proofing". It surfaced in the 1960s, and was first applied in the car manufacturing industry. Poka-yoke is credited to industrial engineer Shigeo Shingo.

Shingo sought to solve a problem Toyota was experiencing: Their factory workers regularly made the mistake of forgetting to insert a couple of springs required for properly assembling a switch.

His solution was to redesign the assembly workflow of the switch so that it involved two steps.

In the new workflow, the workers:

  1. Prepared the two springs for insertion by putting them on a placeholder
  2. Inserted the two springs from the placeholder and into the switch

Though the process of constructing the switch was lengthened, it resulted in reducing manufacturing mistakes, which in turn meant being able to produce a higher quality product.

We can see poka-yoke applied today in software interfaces.

For example, in WordPress, there’s mistake-proofing for the deletion of a post.

Removing a post from the system for good requires two steps:

Step 1: Move the post to the Trash folder

WordPress Drafts folder

Step 2: Delete the post permanently from the Trash folder

WordPress Trash folder

If we broke down the interaction flow for permanently deleting a post in WordPress, we can see that it requires five deliberate actions from the user:

  1. Hover over the post title, which will reveal a menu of actions
  2. Click on the "Trash" action from the menu
  3. Click the Trash folder link to switch to the Trash screen
  4. Hover over the post title again, which will reveal a different set of actions
  5. Click on the "Delete Permanently" action

Though the deletion procedure, by design, isn’t the quickest way to remove data from a system because the data is first staged in a temporary folder, the additional mistake-proofing layer lowers the chance that a user unintentionally deletes a post forever.

Another example of poka-yoke can be seen in the USB connection interface.

To connect a USB cable connector to a USB socket, you have to align the two components properly for the data exchange to work.

To avoid the error of inserting the connector in the wrong orientation, the connector and the socket have stoppers that will prevent them from being joined if the orientation is incorrect.

USB connection interface

As an added poka-yoke layer, there’s a USB logo imprinted at the top of the USB connector, serving as a visual clue for the connector’s orientation.

Top view of USB connector

But, the USB interface design isn’t completely mistake-proof because the user is still permitted to make an error: We can still make the mistake of trying to plug in the connector the wrong way, and the design of the interface requires us to correct ourselves by flipping the connector onto its other side.

As the first best option of poka-yoke, we should aim to design user interfaces in a way that removes any possibility of a mistake to occur in the first place.

For example, Apple’s Lightning cable, a data interchange system just like USB, doesn’t have USB’s orientation issue because the interface is designed to function in either orientation.

Lightning cable interface

In the Lightning cable interface design, poka-yoke is applied by eliminating any chance of an error.

The most obvious benefit of poka-yoke applied to UI designs is our users are safeguarded from performing catastrophic errors, such as erroneously deleting a post they’ve been working on for a few hours.

Poka-yoke, for me, boils down to making the user experience as efficient as we can for our users: Fewer mistakes mean the user is able to accomplish a task more quickly and frustration-free, thus improving the overall UX design of the system.

By the way, poka-yoke is pronounced "po ka yo keh" and it rhymes with my last name.

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post Poka-Yoke in User Interface Design appeared first on Six Revisions.

Continue reading
0
4746

Whenever we go to a website we have never been to before, there is a small voice of doubt inside our head, asking "Why should I trust this site? What if I place the order and don’t receive the goods? What if their payment system isn’t secure and my private information leaks out to the public?"

And just like that, we talk themselves out of an online purchase in a matter of seconds.

We have to address these anxiety-inducing concerns our users have when they first encounter our website. Based on some studies, what follows are a couple of ways a website can establish trust with its users.

Consider Using Trust Seals

Recognizable trust seals/security seals such as Norton Secured, McAfee Secure and TRUSTe are designed to provide assurance that a site is secure and that the site has been audited by a third party.

Logos of popular trust seals.Logos of popular trust seals

Do they work though?

In some cases, they do.

A survey research by Actual Insights shows that 61% of the research participants have at one point decided not to purchase an item from a website that didn’t have a trust seal.

Source: actualinsights.com

An A/B test study by online craft store Jo-Ann (reported by Internet Retailer) suggests that trust seals can lead to increased online sales. In the A/B test conducted by the e-commerce website, sales grew 5-6% because of the Hacker Safe trust seal.

Home page of Jo-Ann online store

Trust seals give people a sense of assurance that it is probably safe to transact with a website, but subscription to these services can be expensive. In the case of Jo-Ann, the subscription set them back $15,000 a year. This may not be a viable option unless you can generate enough added sales to offset the cost of trust seals.

Display Customer Reviews (Even Bad Ones)

According to a report by Econsultancy, bad reviews actually increased conversions by 67% in one case. This is probably due to people mistrusting reviews consisting of only positive feedback.

Another similar option is adding a third-party online consumer review widget on your product pages. One example is Trustpilot, a product review platform. One of my company’s customers implemented a Trustpilot widget and saw a 58% increase in their sales. (Read the case study at my company’s blog).

Honesty and transparency — showing the good and bad side — go a long way towards building trust towards your website.

Your Turn

What are some ways you establish trust with your users? Share it with us in the comments.

Related Content

About the Author

Smriti Chawla works at Visual Website Optimizer, which is a design and conversion rate optimization tool. Connect with Smriti on Twitter.

The post Developing Trust Towards Your Website: Two Options to Consider appeared first on Six Revisions.

Continue reading
0
2875

I will talk about a few interaction design concepts and best practices that when applied will result in the creation of great UIs.

What is a good user interface? As you read through the following ideas, you will see two reoccurring themes: Ease of use and simplicity.

Ockham’s Razor and KISS

Ockham’s razor (or Occam’s razor) can be summarized as follows: When solving a problem that has more than one possible solution, the simplest solution is better, and most likely to be the correct one. In the context of user interface design (UID), this means the user should be able to do what needs to done with the minimum amount of actions required, and that a simple interface is better than a more complicated one.

A closely related principle is the KISS principle. The KISS principle espouses the idea that a concise and easy-to-understand design is better for the user. KISS is an acronym for "keep it simple, stupid", or the more polite variations "keep it short and simple" and "keep it simple and straightforward".

Use common design patterns to avoid confusion and maximize familiarity.Use common design patterns to avoid confusion and maximize familiarity.

Comprehension is Better than Memorization

An effective UID doesn’t burden the user with the task of memorizing how the interface is supposed to work. One of the main roles of designers is to make the interface intuitive and straightforward.

A few examples of techniques and components that help people understand a UI:

When we engineer interfaces that are optimized for comprehension, our users will be able to learn and reuse the UI more efficiently.

Visual cues like icons help people understand interface elements quicker.

Don’t Make Users Think

This design principle highlights the importance of clarity and self-evidence in user interfaces.

In other words, an effective interaction is one that does not require significant amounts of brainpower to figure out. Complex actions should be avoided. Interactions should not be mentally-encumbering. The layout and element groupings should be rationally sound.

This principle is from a usability book entitled Don’t Make Me Think by Steve Krug.

Omit Unnecessary Elements

UIs should only have essential elements. Nothing more and nothing less.

We can achieve this by through reductionism, progressive disclosure, following the 80-20 rule, and so forth.

Optimize the Signal-to-Noise Ratio

In certain cases, UIs may have important elements (signals) and not-so-important ones (noise).

We should focus on increasing the signal and on avoiding noise.

Copywriting is Interface Design

You have heard it plenty of times: Content is very important and is a crucial component of UIs. This idea is discussed in the book Getting Real by Jason Fried.

Tried and True is Better Than New

Don’t strive to innovate for the sake of being different. You should choose interface elements that have proven themselves in the past.

However, you should also test new design ideas for interface components that are questionably or inconclusively effective.

Poka-Yoke Principle

The Poka-yoke principle is also referred to as "mistake-proofing." It’s a philosophy where you aim to prevent incorrect user operations through good design.

Miller’s Law

One function block should only contain 5-7 elements. According to Miller, 7 is the number of objects an average person can hold in his working memory (i.e. our RAM).

Consistency

Inconsistency is an issue that plagues large sites, such as portals, network sites and old sites. Consistency is a key factor in usability. A website’s design should be predictable. A solid website architecture plan will help large sites maintain consistency.

Quick Access to Important Controls

Settings and management tools should be easily accessed. If possible, the user should be able to run everything from any page on the site.

Twitter has a fixed top navigation bar that allows users to access important controls anywhere on the site.

Use Familiar Controls

Basic interface components such as buttons, text boxes, hyperlinks, and so forth are already familiar to Web users. Use these time-tested elements and visual cues when handling interactions to ensure success.

People Don’t Read, They Scan

People don’t like reading too much information, so don’t make them read a lot of it as a prerequisite to interfacing with your UI.

Related Content

About the Author

Nikita Semenov is the founder and CEO at SECL Group Ltd. Web development has been his life’s work since 2003. Contact him via the company website contact page or on Facebook.

The post Ideas to Keep in Mind When Designing User Interfaces appeared first on Six Revisions.

Continue reading
0

Testimonial

Thank you so much! We are very happy with our new website. It is easy to use and all of our customers tell us, they love it.

Contact Us

  • 13245 Atlantic Blvd. #4352
    Jacksonville, FL 32225
  • 904-240-5823